#e8e8e8
1/* The switch - the box around the slider */ 2.switch { 3 font-size: 1rem; 4 position: relative; 5 display: inline-block; 6 width: 4em; 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 inset: 0; 22 background-color: #eee; 23 transition: 0.4s; 24 border-radius: 0.5em; 25 box-shadow: 0 0.2em #dfd9d9; 26} 27 28.slider:before { 29 position: absolute; 30 content: ""; 31 height: 1.5em; 32 width: 1.4em; 33 border-radius: 0.3em; 34 left: 0.3em; 35 bottom: 0.7em; 36 background-color: lightsalmon; 37 transition: 0.4s; 38 box-shadow: 0 0.4em #bcb4b4; 39} 40 41.slider:hover::before { 42 box-shadow: 0 0.2em #bcb4b4; 43 bottom: 0.5em; 44} 45 46input:checked+.slider:before { 47 transform: translateX(2em); 48 background: lightgreen; 49}
Comments
MIT License