#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 border-radius: 30px; 26 box-shadow: 0 0 0 2px #f32f2150; 27 border: 4px solid transparent; 28 overflow: hidden; 29 transition: .4s; 30 background: transparent; 31} 32 33.slider:before { 34 position: absolute; 35 content: ""; 36 width: 100%; 37 height: 100%; 38 border-radius: 30px; 39 background-color: #f32f21; 40 transform: translateX(-50%); 41 transition: .4s; 42} 43 44input:checked + .slider { 45 background-color: #f7b48e; 46} 47 48input:focus:checked + .slider { 49 box-shadow: 0 0 0 2px #f32f21, 0 0 4px #777; 50} 51 52input:checked + .slider:before { 53 transform: translateX(1.5em); 54}
Comments
MIT License