Switch by Ratinax
#e8e8e8
1/* The switch - the box around the slider */ 2.switch { 3 /* Variables */ 4 --switch_width: 2em; 5 --switch_height: 1em; 6 --thumb_color: green; 7 --track_color: #e8e8e8; 8 --track_active_color: #888; 9 --outline_color: #000; 10 font-size: 17px; 11 position: relative; 12 display: inline-block; 13 width: var(--switch_width); 14 height: var(--switch_height); 15} 16 17/* Hide default HTML checkbox */ 18.switch .input { 19 opacity: 0; 20 width: 0; 21 height: 0; 22} 23 24/* The slider */ 25.slider { 26 box-sizing: border-box; 27 border: 2px solid var(--outline_color); 28 position: absolute; 29 cursor: pointer; 30 top: 0; 31 left: 0; 32 right: 0; 33 bottom: 0; 34 transition: .15s; 35 border-radius: var(--switch_height); 36} 37 38.slider:before { 39 box-sizing: border-box; 40 position: absolute; 41 content: ""; 42 height: var(--switch_height); 43 width: var(--switch_height); 44 border: 2px solid var(--outline_color); 45 border-radius: 100%; 46 left: -2px; 47 bottom: -2px; 48 background-color: var(--thumb_color); 49 transform: translateY(-0.2em); 50 box-shadow: 0 0.2em 0 var(--outline_color); 51 transition: .15s; 52} 53 54.input:checked + .slider { 55 background-color: var(--track_active_color); 56} 57 58.input:focus-visible + .slider { 59 box-shadow: 0 0 0 2px var(--track_active_color); 60} 61 62/* Raise thumb when hovered */ 63.input:hover + .slider:before { 64 transform: translateY(-0.3em); 65 box-shadow: 0 0.3em 0 var(--outline_color); 66} 67 68.input:checked + .slider:before { 69 transform: translateX(calc(var(--switch_width) - var(--switch_height))) translateY(-0.2em); 70 background-color: red; 71} 72 73/* Raise thumb when hovered & checked */ 74.input:hover:checked + .slider:before { 75 transform: translateX(calc(var(--switch_width) - var(--switch_height))) translateY(-0.3em); 76 box-shadow: 0 0.3em 0 var(--outline_color); 77}
376 views
Variation of aswitch
MIT License