1button {
2  --fontSize: 2rem;
3  --button: 356, 80%;
4  --buttonColor: hsl(var(--button), 70%);
5  --sideColor: hsl(var(--button), 40%);
6  --text: hsl(var(--button), 30%);
7  --bgColor: #e8e8e8;
8  position: relative;
9  font-size: 0;
10  font-family: sans-serif;
11  transition: all 300ms cubic-bezier(0.47, 1.64, 0.41, 0.8);
12  border-radius: 999px;
13  padding: calc(var(--fontSize) / 2);
14  height: calc(var(--fontSize) * 2);
15  min-width: calc(var(--fontSize) * 2);
16  line-height: calc(var(--fontSize) * 0.75);
17  border: none;
18  outline: none;
19  background-color: var(--buttonColor);
20  transform: rotate(-25deg);
21  color: var(--text);
22  white-space: nowrap;
23  cursor: pointer;
24  -webkit-tap-highlight-color: transparent;
25  box-shadow: calc(var(--fontSize) / -25) calc(var(--fontSize) / 25) calc(var(--fontSize) / 25) #ffffffbb inset, calc(var(--fontSize) / -25) calc(var(--fontSize) / -50) calc(var(--fontSize) / 25) #ffffff88 inset,
26    0 0 calc(var(--fontSize) / 5) #0f004a77 inset, 0 0 0 calc(var(--fontSize) / 3.6) var(--buttonColor) inset,
27    0 0 calc(var(--fontSize) / 6.25) calc(var(--fontSize) / 3.125) #0f004a44 inset, calc(var(--fontSize) / -25) calc(var(--fontSize) / 12.5) 0 var(--sideColor),
28    calc(var(--fontSize) / -8.33) calc(var(--fontSize) / 12.5) calc(var(--fontSize) / 6.25) #0f004a44, calc(var(--fontSize) / -16.666) calc(var(--fontSize) / 12.5) calc(var(--fontSize) / 25) #0f004a66;
29}
30
31button:hover {
32  transform: rotate(0);
33  overflow: visible;
34  font-size: var(--fontSize);
35}
36
37button::before,
38button::after {
39  content: ": ";
40  font-family: serif;
41  font-weight: bold;
42  text-shadow: calc(var(--fontSize) / 25) 0 0 var(--sideColor), 0 0 calc(var(--fontSize) / 12.5) #0f004a55,
43    calc(var(--fontSize) / 50) 0 0 var(--sideColor), calc(var(--fontSize) / 50) calc(var(--fontSize) / -50) 0 var(--sideColor);
44  color: var(--bgColor);
45  font-size: var(--fontSize);
46}