1.container {
2  display: flex;
3  position: relative;
4  gap: 4px;
5}
6
7.container input[type="radio"] {
8  position: absolute;
9  opacity: 0;
10  cursor: pointer;
11  height: 0;
12  width: 0;
13}
14
15.container input[type="radio"]:checked + .button {
16  opacity: 1;
17}
18
19.container input[type="radio"]:checked + .button .pop {
20  animation: fly-up 0.5s ease-in-out;
21}
22
23.button {
24  position: relative;
25  border: none;
26  background: transparent;
27  padding: 0;
28  cursor: pointer;
29  outline-offset: 4px;
30  transition: filter 250ms;
31  user-select: none;
32  touch-action: manipulation;
33  width: 50px;
34  border-radius: 30px;
35  height: 50px;
36  opacity: 0.4;
37  box-shadow: 0px 0px 40px -5px hsl(170deg 100% 40%);
38}
39
40.button .pop {
41  width: 22px;
42  height: 22px;
43  position: absolute;
44  display: block;
45  left: 50%;
46  z-index: -1;
47  transform: translate(-50%, 0);
48  top: 0;
49  opacity: 0.3;
50}
51
52@keyframes fly-up {
53  0% {
54    transform: translate(-50%, 0);
55  }
56
57  50% {
58    transform: translate(-50%, -40px);
59  }
60
61  100% {
62    transform: translate(-50%, 0);
63  }
64}
65
66.button .shadow {
67  position: absolute;
68  top: 0;
69  left: 0;
70  width: 100%;
71  height: 100%;
72  border-radius: 12px;
73  background: hsl(0deg 0% 0% / 0.25);
74  will-change: transform;
75  transform: translateY(2px);
76  transition: all
77    600ms
78    cubic-bezier(.3, .7, .4, 1);
79}
80
81.button .edge {
82  position: absolute;
83  top: 0;
84  left: 0;
85  width: 100%;
86  height: 100%;
87  border-radius: 12px;
88  background: linear-gradient(
89    to left,
90    hsl(170deg 100% 16%) 0%,
91    hsl(170deg 100% 32%) 8%,
92    hsl(170deg 100% 32%) 92%,
93    hsl(170deg 100% 16%) 100%
94  );
95}
96
97.button .front {
98  display: flex;
99  align-items: center;
100  justify-content: center;
101  position: relative;
102  width: 100%;
103  height: 100%;
104  border-radius: 12px;
105  font-size: 1.1rem;
106  color: white;
107  background: hsl(170deg 100% 50%);
108  will-change: transform;
109  transform: translateY(-4px);
110  box-shadow: inset 4px 4px 8px hsl(170deg 100% 30%), inset -4px -4px 8px hsl(170deg 100% 80%);
111  transition: all
112    600ms
113    cubic-bezier(.3, .7, .4, 1);
114}
115
116.button .front svg {
117  display: block;
118  color: hsl(170deg 100% 30%);
119  margin-right: 0;
120}
121
122.button:hover .front {
123  transform: translateY(-6px);
124  transition: transform
125  
126    250ms
127    cubic-bezier(.3, .7, .4, 1.5);
128}
129
130.button:active .front {
131  transform: translateY(-2px);
132  transition: transform 34ms;
133}
134
135.button:hover .shadow {
136  transform: translateY(4px);
137  transition: transform
138    250ms
139    cubic-bezier(.3, .7, .4, 1.5);
140}
141
142.button:active .shadow {
143  transform: translateY(1px);
144  transition: transform 34ms;
145}