#e8e8e8
1.switch input { 2 display: none; 3} 4 5.switch { 6 width: 60px; 7 height: 30px; 8 position: relative; 9} 10 11.slider { 12 position: absolute; 13 top: 0; 14 bottom: 0; 15 left: 0; 16 right: 0; 17 border-radius: 30px; 18 box-shadow: 0 0 0 2px #777, 0 0 4px #777; 19 cursor: pointer; 20 border: 4px solid transparent; 21 overflow: hidden; 22 transition: 0.2s; 23} 24 25.slider:before { 26 position: absolute; 27 content: ""; 28 width: 100%; 29 height: 100%; 30 background-color: #777; 31 border-radius: 30px; 32 transform: translateX(-30px); 33 /*translateX(-(w-h))*/ 34 transition: 0.2s; 35} 36 37input:checked + .slider:before { 38 transform: translateX(30px); 39 /*translateX(w-h)*/ 40 background-color: limeGreen; 41} 42 43input:checked + .slider { 44 box-shadow: 0 0 0 2px limeGreen, 0 0 8px limeGreen; 45} 46 47.switch200 .slider:before { 48 width: 200%; 49 transform: translateX(-82px); 50 /*translateX(-(w-h))*/ 51} 52 53.switch200 input:checked + .slider:before { 54 background-color: red; 55} 56 57.switch200 input:checked + .slider { 58 box-shadow: 0 0 0 2px red, 0 0 8px red; 59}
Comments
MIT License