Switch by Subaashbala
#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: 0.25em; 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: hotpink; 26 transition: 0.4s; 27 border-radius: 30px; 28} 29 30.slider:before { 31 position: absolute; 32 content: "O"; 33 display: grid; 34 text-align: center; 35 vertical-align: middle; 36 place-items: center; 37 font-size: 1em; 38 font-weight: 900; 39 width: 2em; 40 aspect-ratio: 1; 41 border-radius: 50%; 42 bottom: 0.3em; 43 left: 0; 44 top: 50%; 45 transform: translate(0, -50%); 46 color: hotpink; 47 background-color: pink; 48 border: 1px solid rgba(255, 105, 180, 0.507); 49 transition: 0.4s; 50} 51 52.switch input:checked + .slider { 53 background-color: teal; 54} 55 56.switch input:checked + .slider:before { 57 content: "|"; 58 color: teal; 59 background: paleturquoise; 60 border: 1px solid rgba(0, 128, 128, 0.514); 61 transform: translate(1.75em, -50%) rotateZ(360deg); 62} 63
509 views
509 views
Variations
2309 views
MIT License