#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: #B0B0B0; 26 border: 1px solid #B0B0B0; 27 transition: .4s; 28 border-radius: 32px; 29 outline: none; 30} 31 32.slider:before { 33 position: absolute; 34 content: ""; 35 height: 2rem; 36 width: 2rem; 37 border-radius: 50%; 38 outline: 2px solid #B0B0B0; 39 left: -1px; 40 bottom: -1px; 41 background-color: #fff; 42 transition: transform .25s ease-in-out 0s; 43} 44 45.slider-icon { 46 opacity: 0; 47 height: 12px; 48 width: 12px; 49 stroke-width: 8; 50 position: absolute; 51 z-index: 999; 52 stroke: #222222; 53 right: 60%; 54 top: 30%; 55 transition: right ease-in-out .3s, opacity ease-in-out .15s; 56} 57 58input:checked + .slider { 59 background-color: #222222; 60} 61 62input:checked + .slider .slider-icon { 63 opacity: 1; 64 right: 20%; 65} 66 67input:checked + .slider:before { 68 transform: translateX(1.5em); 69 outline-color: #181818; 70}
Comments
MIT License