Radio by rubyreapergaming
#212121
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: #f5434f; 25 --shadow-primary: #631e29; 26 --color: #ffffff; 27 --font-size: 9px; 28 --shadow-primary-hue: 180; 29 --shadow-secondary-hue: 60; 30 --shadow-secondary: #000000; 31 --clip: polygon( 32 11% 0, 33 95% 0, 34 100% 25%, 35 90% 90%, 36 95% 90%, 37 85% 90%, 38 85% 100%, 39 7% 100%, 40 0 80% 41 ); 42 --border: 5px; 43 --shimmy-distance: 5; 44 --clip-one: polygon( 45 0 2%, 46 100% 2%, 47 100% 95%, 48 95% 95%, 49 95% 90%, 50 85% 90%, 51 85% 95%, 52 8% 95%, 53 0 70% 54 ); 55 --clip-two: polygon( 56 0 78%, 57 100% 78%, 58 100% 100%, 59 95% 100%, 60 95% 90%, 61 85% 90%, 62 85% 100%, 63 8% 100%, 64 0 78% 65 ); 66 --clip-three: polygon( 67 0 44%, 68 100% 44%, 69 100% 54%, 70 95% 54%, 71 95% 54%, 72 85% 54%, 73 85% 54%, 74 8% 54%, 75 0 54% 76 ); 77 --clip-four: polygon( 78 0 0, 79 100% 0, 80 100% 0, 81 95% 0, 82 95% 0, 83 85% 0, 84 85% 0, 85 8% 0, 86 0 0 87 ); 88 --clip-five: polygon( 89 0 0, 90 100% 0, 91 100% 0, 92 95% 0, 93 95% 0, 94 85% 0, 95 85% 0, 96 8% 0, 97 0 0 98 ); 99 --clip-six: polygon( 100 0 40%, 101 100% 40%, 102 100% 85%, 103 95% 85%, 104 95% 85%, 105 85% 85%, 106 85% 85%, 107 8% 85%, 108 0 70% 109 ); 110 --clip-seven: polygon( 111 0 63%, 112 100% 63%, 113 100% 80%, 114 95% 80%, 115 95% 80%, 116 85% 80%, 117 85% 80%, 118 8% 80%, 119 0 70% 120 ); 121 color: var(--color); 122 text-transform: uppercase; 123 font-size: var(--font-size); 124 letter-spacing: 3px; 125 position: relative; 126 font-weight: 900; 127 width: 100%; 128 height: 100%; 129 line-height: 38px; 130 text-align: center; 131 transition: background 0.2s, 0.3s; 132 font-family: "Orbitron", sans-serif; /* Orbitron font */ 133} 134 135.input:checked + .btn { 136 --primary: #161a25; 137 --shadow-primary: #ffffff; 138} 139 140.input:hover + .btn { 141 --primary: #cc133c; 142 --font-size: 11px; 143} 144 145.btn:after, 146.btn:before { 147 content: ""; 148 position: absolute; 149 top: 0; 150 left: 0; 151 right: 0; 152 bottom: 0; 153 clip-path: var(--clip); 154 z-index: -1; 155} 156 157.btn:before { 158 background: var(--shadow-primary); 159 transform: translate(var(--border), 0); 160} 161 162.btn:after { 163 background: var(--primary); 164} 165 166.btn__tag { 167 position: absolute; 168 padding: 1px 4px; 169 letter-spacing: 1px; 170 line-height: 1; 171 bottom: -5%; 172 right: 5%; 173 font-weight: normal; 174 color: hsl(0, 0%, 0%); 175 font-size: var(--label-size); 176} 177 178.btn__glitch { 179 position: absolute; 180 top: calc(var(--border) * -1); 181 left: calc(var(--border) * -1); 182 right: calc(var(--border) * -1); 183 bottom: calc(var(--border) * -1); 184 background: var(--shadow-primary); 185 text-shadow: 2px 2px var(--shadow-primary), -2px -2px var(--shadow-secondary); 186 clip-path: var(--clip); 187 animation: glitch 2s infinite; 188 display: none; 189} 190 191.input:hover + .btn .btn__glitch { 192 display: block; 193} 194 195.input:checked + .btn .btn__glitch { 196 display: block; 197 animation: glitch 5s infinite; 198} 199 200.btn__glitch:before { 201 content: ""; 202 position: absolute; 203 top: calc(var(--border) * 1); 204 right: calc(var(--border) * 1); 205 bottom: calc(var(--border) * 1); 206 left: calc(var(--border) * 1); 207 clip-path: var(--clip); 208 background: var(--primary); 209 z-index: -1; 210} 211 212@keyframes glitch { 213 0% { 214 clip-path: var(--clip-one); 215 } 216 217 2%, 218 8% { 219 clip-path: var(--clip-two); 220 transform: translate(calc(var(--shimmy-distance) * -1%), 0); 221 } 222 223 6% { 224 clip-path: var(--clip-two); 225 transform: translate(calc(var(--shimmy-distance) * 1%), 0); 226 } 227 228 9% { 229 clip-path: var(--clip-two); 230 transform: translate(0, 0); 231 } 232 233 10% { 234 clip-path: var(--clip-three); 235 transform: translate(calc(var(--shimmy-distance) * 1%), 0); 236 } 237 238 13% { 239 clip-path: var(--clip-three); 240 transform: translate(0, 0); 241 } 242 243 14%, 244 21% { 245 clip-path: var(--clip-four); 246 transform: translate(calc(var(--shimmy-distance) * 1%), 0); 247 } 248 249 25% { 250 clip-path: var(--clip-five); 251 transform: translate(calc(var(--shimmy-distance) * 1%), 0); 252 } 253 254 30% { 255 clip-path: var(--clip-five); 256 transform: translate(calc(var(--shimmy-distance) * -1%), 0); 257 } 258 259 35%, 260 45% { 261 clip-path: var(--clip-six); 262 transform: translate(calc(var(--shimmy-distance) * -1%)); 263 } 264 265 40% { 266 clip-path: var(--clip-six); 267 transform: translate(calc(var(--shimmy-distance) * 1%)); 268 } 269 270 50% { 271 clip-path: var(--clip-six); 272 transform: translate(0, 0); 273 } 274 275 55% { 276 clip-path: var(--clip-seven); 277 transform: translate(calc(var(--shimmy-distance) * 1%), 0); 278 } 279 280 60% { 281 clip-path: var(--clip-seven); 282 transform: translate(0, 0); 283 } 284 285 31%, 286 61%, 287 100% { 288 clip-path: var(--clip-four); 289 } 290} 291 292.number { 293 background: var(--shadow-primary); 294 color: #323232; 295 font-size: 5.5px; 296 font-weight: 700; 297 letter-spacing: 1px; 298 position: absolute; 299 width: 15px; 300 height: 6px; 301 top: 0; 302 left: 81%; 303 line-height: 6.2px; 304} 305
95 views
Variation of aradio
MIT License