1button {
2  --fs: 1.25em;
3  --col1: honeydew;
4  --col2: rgba(240, 128, 128, 0.603);
5  --col3: indianred;
6  --col4: maroon;
7  --pd: .5em .65em;
8  display: grid;
9  align-content: baseline;
10  appearance: none;
11  border: 0;
12  grid-template-columns: min-content 1fr;
13  padding: var(--pd);
14  font-size: var(--fs);
15  color: var(--col1);
16  background-color: var(--col3);
17  border-radius: 6px;
18  text-shadow: 1px 1px var(--col4);
19  box-shadow: inset -2px 1px 1px var(--col2),
20    inset 2px 1px 1px var(--col2);
21  position: relative;
22  transition: all .75s ease-out;
23  transform-origin: center;
24}
25
26button:hover {
27  color: var(--col4);
28  box-shadow: inset -2px 1px 1px var(--col2),
29    inset 2px 1px 1px var(--col2),
30    inset 0px -2px 20px var(--col4),
31    0px 20px 30px var(--col3),
32    0px -20px 30px var(--col2),
33    1px 2px 20px var(--col4);
34  text-shadow: 1px 1px var(--col2);
35}
36
37button:active {
38  animation: offset 1s ease-in-out infinite;
39  outline: 2px solid var(--col2);
40  outline-offset: 0;
41}
42
43button::after,
44button::before {
45  content: '';
46  align-self: center;
47  justify-self: center;
48  height: .5em;
49  margin: 0 .5em;
50  grid-column: 1;
51  grid-row: 1;
52  opacity: 1;
53}
54
55button::after {
56  position: relative;
57  border: 2px solid var(--col4);
58  border-radius: 50%;
59  transition: all .5s ease-out;
60  height: .1em;
61  width: .1em;
62}
63
64button:hover::after {
65  border: 2px solid var(--col3);
66  transform: rotate(-120deg) translate(10%, 140%);
67}
68
69button::before {
70  border-radius: 50% 0%;
71  border: 4px solid var(--col4);
72  box-shadow: inset 1px 1px var(--col2);
73  transition: all 1s ease-out;
74  transform: rotate(45deg);
75  height: .45em;
76  width: .45em;
77}
78
79button:hover::before {
80  border-radius: 50%;
81  border: 4px solid var(--col1);
82  transform: scale(1.25) rotate(0deg);
83  animation: blink 1.5s ease-out 1s infinite alternate;
84}
85
86button:hover > span {
87  filter: contrast(150%);
88}
89
90@keyframes blink {
91  0% {
92    transform: scale(1, 1) skewX(0deg);
93    opacity: 1;
94  }
95
96  5% {
97    transform: scale(1.5, .1) skewX(10deg);
98    opacity: .5;
99  }
100
101  10%,
102  35% {
103    transform: scale(1, 1) skewX(0deg);
104    opacity: 1;
105  }
106
107  40% {
108    transform: scale(1.5, .1) skewX(10deg);
109    opacity: .25;
110  }
111
112  45%,
113  100% {
114    transform: scale(1, 1) skewX(0deg);
115    opacity: 1;
116  }
117}
118
119@keyframes offset {
120  50% {
121    outline-offset: .15em;
122    outline-color: var(--col1);
123  }
124
125  55% {
126    outline-offset: .1em;
127    transform: translateY(1px);
128  }
129
130  80%,
131  100% {
132    outline-offset: 0;
133  }
134}