Radio by InfinityLoopGames

1.container {
2  display: flex;
3  flex-direction: row;
4}
5
6.radio-wrapper {
7  position: relative;
8  height: 38px;
9  width: 84px;
10  margin: 3px;
11}
12
13.radio-wrapper .input {
14  position: absolute;
15  height: 100%;
16  width: 100%;
17  margin: 0;
18  cursor: pointer;
19  z-index: 10;
20  opacity: 0;
21}
22
23.btn {
24  --primary: #ff184c;
25  --shadow-primary: #fded00;
26  --color: white;
27  --font-size: 9px;
28  --shadow-primary-hue: 180;
29  --shadow-secondary-hue: 60;
30  --shadow-secondary: hsl(var(--shadow-secondary-hue), 90%, 60%);
31  --clip: polygon(11% 0, 95% 0, 100% 25%, 90% 90%, 95% 90%, 85% 90%, 85% 100%, 7% 100%, 0 80%);
32  --border: 5px;
33  --shimmy-distance: 5;
34  --clip-one: polygon(0 2%, 100% 2%, 100% 95%, 95% 95%, 95% 90%, 85% 90%, 85% 95%, 8% 95%, 0 70%);
35  --clip-two: polygon(0 78%, 100% 78%, 100% 100%, 95% 100%, 95% 90%, 85% 90%, 85% 100%, 8% 100%, 0 78%);
36  --clip-three: polygon(0 44%, 100% 44%, 100% 54%, 95% 54%, 95% 54%, 85% 54%, 85% 54%, 8% 54%, 0 54%);
37  --clip-four: polygon(0 0, 100% 0, 100% 0, 95% 0, 95% 0, 85% 0, 85% 0, 8% 0, 0 0);
38  --clip-five: polygon(0 0, 100% 0, 100% 0, 95% 0, 95% 0, 85% 0, 85% 0, 8% 0, 0 0);
39  --clip-six: polygon(0 40%, 100% 40%, 100% 85%, 95% 85%, 95% 85%, 85% 85%, 85% 85%, 8% 85%, 0 70%);
40  --clip-seven: polygon(0 63%, 100% 63%, 100% 80%, 95% 80%, 95% 80%, 85% 80%, 85% 80%, 8% 80%, 0 70%);
41  color: var(--color);
42  text-transform: uppercase;
43  font-size: var(--font-size);
44  letter-spacing: 3px;
45  position: relative;
46  font-weight: 900;
47  width: 100%;
48  height: 100%;
49  line-height: 38px;
50  text-align: center;
51  transition: background 0.2s, 0.3s;
52}
53
54.input:checked + .btn {
55  --primary: #6c3697;
56  --shadow-primary: #00e572;
57}
58
59.input:hover + .btn {
60  --primary: #006042;
61  --font-size: 11px;
62}
63
64.btn:after, .btn:before {
65  content: '';
66  position: absolute;
67  top: 0;
68  left: 0;
69  right: 0;
70  bottom: 0;
71  clip-path: var(--clip);
72  z-index: -1;
73}
74
75.btn:before {
76  background: var(--shadow-primary);
77  transform: translate(var(--border), 0);
78}
79
80.btn:after {
81  background: var(--primary);
82}
83
84.btn__tag {
85  position: absolute;
86  padding: 1px 4px;
87  letter-spacing: 1px;
88  line-height: 1;
89  bottom: -5%;
90  right: 5%;
91  font-weight: normal;
92  color: hsl(0, 0%, 0%);
93  font-size: var(--label-size);
94}
95
96.btn__glitch {
97  position: absolute;
98  top: calc(var(--border) * -1);
99  left: calc(var(--border) * -1);
100  right: calc(var(--border) * -1);
101  bottom: calc(var(--border) * -1);
102  background: var(--shadow-primary);
103  text-shadow: 2px 2px var(--shadow-primary), -2px -2px var(--shadow-secondary);
104  clip-path: var(--clip);
105  animation: glitch 2s infinite;
106  display: none;
107}
108
109.input:hover + .btn .btn__glitch {
110  display: block;
111}
112
113.input:checked + .btn .btn__glitch {
114  display: block;
115  animation: glitch 5s infinite;
116}
117
118.btn__glitch:before {
119  content: '';
120  position: absolute;
121  top: calc(var(--border) * 1);
122  right: calc(var(--border) * 1);
123  bottom: calc(var(--border) * 1);
124  left: calc(var(--border) * 1);
125  clip-path: var(--clip);
126  background: var(--primary);
127  z-index: -1;
128}
129
130@keyframes glitch {
131  0% {
132    clip-path: var(--clip-one);
133  }
134
135  2%, 8% {
136    clip-path: var(--clip-two);
137    transform: translate(calc(var(--shimmy-distance) * -1%), 0);
138  }
139
140  6% {
141    clip-path: var(--clip-two);
142    transform: translate(calc(var(--shimmy-distance) * 1%), 0);
143  }
144
145  9% {
146    clip-path: var(--clip-two);
147    transform: translate(0, 0);
148  }
149
150  10% {
151    clip-path: var(--clip-three);
152    transform: translate(calc(var(--shimmy-distance) * 1%), 0);
153  }
154
155  13% {
156    clip-path: var(--clip-three);
157    transform: translate(0, 0);
158  }
159
160  14%, 21% {
161    clip-path: var(--clip-four);
162    transform: translate(calc(var(--shimmy-distance) * 1%), 0);
163  }
164
165  25% {
166    clip-path: var(--clip-five);
167    transform: translate(calc(var(--shimmy-distance) * 1%), 0);
168  }
169
170  30% {
171    clip-path: var(--clip-five);
172    transform: translate(calc(var(--shimmy-distance) * -1%), 0);
173  }
174
175  35%, 45% {
176    clip-path: var(--clip-six);
177    transform: translate(calc(var(--shimmy-distance) * -1%));
178  }
179
180  40% {
181    clip-path: var(--clip-six);
182    transform: translate(calc(var(--shimmy-distance) * 1%));
183  }
184
185  50% {
186    clip-path: var(--clip-six);
187    transform: translate(0, 0);
188  }
189
190  55% {
191    clip-path: var(--clip-seven);
192    transform: translate(calc(var(--shimmy-distance) * 1%), 0);
193  }
194
195  60% {
196    clip-path: var(--clip-seven);
197    transform: translate(0, 0);
198  }
199
200  31%, 61%, 100% {
201    clip-path: var(--clip-four);
202  }
203}
204
205.number {
206  background: var(--shadow-primary);
207  color: #323232;
208  font-size: 5.5px;
209  font-weight: 700;
210  letter-spacing: 1px;
211  position: absolute;
212  width: 15px;
213  height: 6px;
214  top: 0;
215  left: 81%;
216  line-height: 6.2px;
217}
218