Switch by Muaz-Aldalil
#212121
1.toggle-checkbox { 2 -webkit-appearance: none; 3 -moz-appearance: none; 4 appearance: none; 5 display: none; 6} 7 8.toggle-switch { 9 background-color: gray; 10 width: 78px; 11 height: 32px; 12 border-radius: 16px; 13 position: relative; 14 transition: 0.3s; 15 cursor: pointer; 16} 17 18.toggle-switch::before { 19 content: ""; 20 font-weight: 900; 21 background-color: white; 22 width: 24px; 23 height: 24px; 24 position: absolute; 25 border-radius: 50%; 26 top: 4px; 27 left: 4px; 28 display: flex; 29 justify-content: center; 30 align-items: center; 31 color: #ddd; 32 transition: 0.3s; 33} 34 35.toggle-checkbox:checked+.toggle-switch { 36 background-color: #0075ff; 37} 38 39.toggle-checkbox:checked+.toggle-switch::before { 40 content: ""; 41 left: 50px; 42 color: #0075ff; 43}
832 views
832 views
MIT License