This post is saved as a draft.
#e8e8e8
1/* The switch - the box around the slider */ 2.switch { 3 font-size: 17px; 4 position: relative; 5 display: inline-block; 6 width: 3.5em; 7 height: 1.5em; 8} 9/* Hide default HTML checkbox */ 10.switch input { 11 opacity: 0; 12 width: 0; 13 height: 0; 14} 15/* The slider */ 16.slider { 17 position: absolute; 18 cursor: pointer; 19 inset: 0; 20 background-color: #ccc; 21 transition: 0.4s; 22 border-radius: 1rem 0rem 1rem; 23} 24 25.slider:before { 26 position: absolute; 27 content: ""; 28 height: 1.5em; 29 width: 1.4em; 30 left: 0em; 31 bottom: 0em; 32 background-color: white; 33 transition: 0.4s; 34 border-radius: 1rem 0rem 1rem; 35 border: 3px solid white; 36} 37 38.ch:checked + .slider { 39 background-color: #72eb67; 40} 41 42.ch:focus + .slider { 43 box-shadow: 0 0 1px #2196f3; 44} 45 46.ch:checked + .slider:before { 47 transform: translateX(2.2em); 48 background-color: green; 49 box-shadow: 0px 0px 40px 5px #72eb67; 50 border: 3px solid white; 51} 52 53.ch:checked + .slider::after { 54 content: "|"; 55 color: white; 56 position: absolute; 57 right: 0.3rem; 58 top: -3.3px; 59 transform: rotate(45deg); 60} 61
Variation of aswitch
Variation of aswitch