411 views
1/* The switch - the box around the slider */ 2.switch { 3 font-size: 17px; 4 position: relative; 5 display: inline-block; 6 width: 2em; 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: #ccc; 26 transition: .4s; 27 border-radius: 50%; 28} 29 30.slider:before { 31 position: absolute; 32 content: ""; 33 height: 1.4em; 34 width: 1.4em; 35 border-radius: 2.5px; 36 left: 0.3em; 37 bottom: 0.3em; 38 background-color: white; 39 transition: .4s; 40 scale: 0; 41} 42 43.chk:checked + .slider { 44 background-color: limegreen; 45 transform: scale(0.7); 46 border-radius: 50%; 47} 48 49.chk:checked + .slider:before { 50 transform: rotateZ(360deg); 51 scale: 1; 52 border-radius: 50%; 53}
Praashoo7
Prashant
MIT License