#e8e8e8
1/* The switch - the box around the slider */ 2.switch { 3 font-size: 17px; 4 position: relative; 5 display: inline-block; 6 width: 62px; 7 height: 35px; 8} 9 10/* Hide default HTML checkbox */ 11.switch input { 12 opacity: 1; 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: 0px; 25 background: #fff; 26 transition: .4s; 27 border-radius: 30px; 28 border: 1px solid #ccc; 29} 30 31.slider:before { 32 position: absolute; 33 content: ""; 34 height: 1.9em; 35 width: 1.9em; 36 border-radius: 16px; 37 left: 1.2px; 38 top: 0; 39 bottom: 0; 40 background-color: white; 41 box-shadow: 0 2px 5px #999999; 42 transition: .4s; 43} 44 45input:checked + .slider { 46 background-color: #5fdd54; 47 border: 1px solid transparent; 48} 49 50input:checked + .slider:before { 51 transform: translateX(1.5em); 52}
Comments
MIT License