1K views
1.switch { 2 position: relative; 3 height: 1.5rem; 4 width: 3rem; 5 cursor: pointer; 6 appearance: none; 7 -webkit-appearance: none; 8 border-radius: 9999px; 9 background-color: rgba(100, 116, 139, 0.377); 10 transition: all .3s ease; 11} 12 13.switch:checked { 14 background-color: rgba(236, 72, 153, 1); 15} 16 17.switch::before { 18 position: absolute; 19 content: ""; 20 left: calc(1.5rem - 1.6rem); 21 top: calc(1.5rem - 1.6rem); 22 display: block; 23 height: 1.6rem; 24 width: 1.6rem; 25 cursor: pointer; 26 border: 1px solid rgba(100, 116, 139, 0.527); 27 border-radius: 9999px; 28 background-color: rgba(255, 255, 255, 1); 29 box-shadow: 0 3px 10px rgba(100, 116, 139, 0.327); 30 transition: all .3s ease; 31} 32 33.switch:hover::before { 34 box-shadow: 0 0 0px 8px rgba(0, 0, 0, .15) 35} 36 37.switch:checked:hover::before { 38 box-shadow: 0 0 0px 8px rgba(236, 72, 153, .15) 39} 40 41.switch:checked:before { 42 transform: translateX(100%); 43 border-color: rgba(236, 72, 153, 1); 44}
Variations
MIT License