Switch by vinodjangid07
#212121
1#checkbox { 2 display: none; 3} 4 5.switch { 6 position: relative; 7 width: 70px; 8 height: 70px; 9 background-color: rgb(99, 99, 99); 10 border-radius: 50%; 11 z-index: 1; 12 cursor: pointer; 13 display: flex; 14 align-items: center; 15 justify-content: center; 16 border: 2px solid rgb(126, 126, 126); 17 box-shadow: 0px 0px 3px rgb(2, 2, 2) inset; 18} 19.switch svg { 20 width: 1.2em; 21} 22.switch svg path { 23 fill: rgb(48, 48, 48); 24} 25#checkbox:checked + .switch { 26 box-shadow: 0px 0px 1px rgb(151, 243, 255) inset, 27 0px 0px 2px rgb(151, 243, 255) inset, 0px 0px 10px rgb(151, 243, 255) inset, 28 0px 0px 40px rgb(151, 243, 255), 0px 0px 100px rgb(151, 243, 255), 29 0px 0px 5px rgb(151, 243, 255); 30 border: 2px solid rgb(255, 255, 255); 31 background-color: rgb(146, 180, 184); 32} 33#checkbox:checked + .switch svg { 34 filter: drop-shadow(0px 0px 5px rgb(151, 243, 255)); 35} 36#checkbox:checked + .switch svg path { 37 fill: rgb(255, 255, 255); 38} 39
11K views
11K views
elijahgummer 12. May at 21:45
12. May at 21:45
very nice
vinodjangid07 13. May at 5:30
13. May at 5:30
@elijahgummer Thanks :)
Variations
1 MIT License