#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: 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: #ccc; 26 box-shadow: inset 2px 5px 10px rgba(0,0,0,0.3); 27 transition: .4s; 28 border-radius: 5px; 29} 30 31.slider:before { 32 position: absolute; 33 content: ""; 34 height: 1.4em; 35 width: 0.1em; 36 border-radius: 0px; 37 left: 0.3em; 38 bottom: 0.3em; 39 background-color: white; 40 transition: .4s; 41} 42 43input:checked + .slider { 44 background-color: #171717; 45 box-shadow: inset 2px 5px 10px rgb(0, 0, 0); 46} 47 48input:checked + .slider:before { 49 transform: translateX(2.8em) rotate(360deg); 50}
Comments
MIT License