Radio by adamgiebl

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