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