Radio by Praashoo7
#212121
1/*Design Inspired by @ykadosh on Codepen*/ 2 3.back { 4 position: absolute; 5 width: 16.6em; 6 height: 6.5em; 7 margin-top: -0.8em; 8 margin-left: -0.77em; 9 border-radius: 70px; 10 box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 2px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -1px 0px inset; 11 background-color: #171717; 12 z-index: -1; 13} 14 15.main { 16 display: flex; 17} 18 19.switch { 20 display: block; 21 position: relative; 22 background-color: black; 23 width: 70px; 24 height: 70px; 25 box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.2), 0 0 1px 2px black, inset 0 2px 2px -2px white, inset 0 0 2px 5px #47434c, inset 0 0 2px 22px black; 26 border-radius: 50%; 27 padding: 20px; 28 margin: 5px; 29} 30 31.switch input { 32 display: none; 33} 34 35.switch input:checked + .button .light { 36 animation: flicker 0.2s infinite 0.3s; 37} 38 39.switch input:checked + .button .shine { 40 opacity: 1; 41} 42 43.switch input:checked + .button .shadow { 44 opacity: 0; 45} 46 47.switch .button { 48 transition: all 0.3s cubic-bezier(1, 0, 1, 1); 49 background-color: #9b0621; 50 width: 55px; 51 height: 55px; 52 border-radius: 50%; 53 position: relative; 54 left: -0.75em; 55 top: -0.75em; 56 cursor: pointer; 57} 58 59.switch .light { 60 opacity: 0; 61 animation: light-off 1s; 62 position: absolute; 63 width: 100%; 64 height: 100%; 65 background-image: radial-gradient(#ffc97e, #ff1818 40%, transparent 70%); 66} 67 68.switch .dots { 69 position: absolute; 70 width: 100%; 71 height: 100%; 72 background-image: radial-gradient(transparent 30%, rgba(101, 0, 0, 0.7) 70%); 73 background-size: 10px 10px; 74 border-radius: 50%; 75} 76 77@keyframes flicker { 78 0% { 79 opacity: 1; 80 } 81 82 80% { 83 opacity: 0.8; 84 } 85 86 100% { 87 opacity: 1; 88 } 89} 90 91@keyframes light-off { 92 0% { 93 opacity: 1; 94 } 95 96 80% { 97 opacity: 0; 98 } 99} 100 101.switch1 { 102 display: block; 103 position: relative; 104 background-color: black; 105 width: 70px; 106 height: 70px; 107 box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.2), 0 0 1px 2px black, inset 0 2px 2px -2px white, inset 0 0 2px 5px #47434c, inset 0 0 2px 22px black; 108 border-radius: 50%; 109 padding: 20px; 110 margin: 5px; 111} 112 113.switch1 input { 114 display: none; 115} 116 117.switch1 input:checked + .button .light { 118 animation: flicker 0.2s infinite 0.3s; 119} 120 121.switch1 input:checked + .button .shine { 122 opacity: 1; 123} 124 125.switch1 input:checked + .button .shadow { 126 opacity: 0; 127} 128 129.switch1 .button { 130 transition: all 0.3s cubic-bezier(1, 0, 1, 1); 131 background-color: #949207; 132 width: 55px; 133 height: 55px; 134 border-radius: 50%; 135 position: relative; 136 left: -0.75em; 137 top: -0.785em; 138 cursor: pointer; 139} 140 141.switch1 .light { 142 opacity: 0; 143 animation: light-off 1s; 144 position: absolute; 145 width: 100%; 146 height: 100%; 147 background-image: radial-gradient(#f6ff7e, #eeff00 40%, transparent 70%); 148} 149 150.switch1 .dots { 151 position: absolute; 152 width: 100%; 153 height: 100%; 154 background-image: radial-gradient(transparent 30%, rgba(91, 101, 0, 0.7) 70%); 155 background-size: 10px 10px; 156 border-radius: 50%; 157} 158 159.switch2 { 160 display: block; 161 position: relative; 162 background-color: black; 163 width: 70px; 164 height: 70px; 165 box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.2), 0 0 1px 2px black, inset 0 2px 2px -2px white, inset 0 0 2px 5px #47434c, inset 0 0 2px 22px black; 166 border-radius: 50%; 167 padding: 20px; 168 margin: 5px; 169} 170 171.switch2 input { 172 display: none; 173} 174 175.switch2 input:checked + .button .light { 176 animation: flicker 0.2s infinite 0.3s; 177} 178 179.switch2 input:checked + .button .shine { 180 opacity: 1; 181} 182 183.switch2 input:checked + .button .shadow { 184 opacity: 0; 185} 186 187.switch2 .button { 188 transition: all 0.3s cubic-bezier(1, 0, 1, 1); 189 background-color: #2f9407; 190 width: 55px; 191 height: 55px; 192 border-radius: 50%; 193 position: relative; 194 left: -0.75em; 195 top: -0.79em; 196 cursor: pointer; 197} 198 199.switch2 .light { 200 opacity: 0; 201 animation: light-off 1s; 202 position: absolute; 203 width: 100%; 204 height: 100%; 205 background-image: radial-gradient(#f6ff7e, #00ff00 40%, transparent 70%); 206} 207 208.switch2 .dots { 209 position: absolute; 210 width: 100%; 211 height: 100%; 212 background-image: radial-gradient(transparent 30%, rgba(0, 101, 13, 0.7) 70%); 213 background-size: 10px 10px; 214 border-radius: 50%; 215}
1.7K views
1.7K views
Variations
1 MIT License