#212121
1/* The switch - the box around the slider */ 2.switch { 3 font-size: 17px; 4 position: relative; 5 display: inline-block; 6 width: 4em; 7 height: 2em; 8} 9 10/* Hide default HTML checkbox */ 11.switch .chk { 12 opacity: 0; 13 width: 0; 14 height: 0; 15} 16 17/* The slider */ 18.slider { 19 position: absolute; 20 cursor: pointer; 21 top: 0; 22 left: 0; 23 right: 0; 24 bottom: 0; 25 background-color: rgb(255, 255, 255); 26 transition: .4s; 27 border-radius: 30px; 28} 29 30.slider:before { 31 position: absolute; 32 content: "OFF"; 33 display: grid; 34 place-content: center; 35 height: 1.6em; 36 width: 3.6em; 37 border-radius: 20px; 38 left: 0.17em; 39 bottom: 0.22em; 40 background-color: rgb(255, 0, 0); 41 box-shadow: 0px 0px 3.7px black; 42 transition: .4s ease-in-out; 43} 44 45.chk:checked + .slider:before { 46 content: "ON"; 47 background-color: limegreen; 48 box-shadow: inset 0px 0px 5px black; 49}
870 views
870 views
Comments
MIT License