3.4K views
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: 2em; 8} 9 10/* Hide default HTML checkbox */ 11.switch input { 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: #fff; 26 border: 1px solid #adb5bd; 27 transition: .4s; 28 border-radius: 30px; 29} 30 31.slider:before { 32 position: absolute; 33 content: ""; 34 height: 1.4em; 35 width: 1.4em; 36 border-radius: 20px; 37 left: 0.27em; 38 bottom: 0.25em; 39 background-color: #adb5bd; 40 transition: .4s; 41} 42 43input:checked + .slider { 44 background-color: #007bff; 45 border: 1px solid #007bff; 46} 47 48input:focus + .slider { 49 box-shadow: 0 0 1px #007bff; 50} 51 52input:checked + .slider:before { 53 transform: translateX(1.4em); 54 background-color: #fff; 55}
arghyaBiswasDev
Arghya Biswas
MIT License