1.1K views
1/* To hide the checkbox */ 2#checkboxInput { 3 display: none; 4} 5 6.toggleSwitch { 7 display: flex; 8 align-items: center; 9 justify-content: center; 10 position: relative; 11 width: 80px; 12 height: 40px; 13 background-color: rgb(199, 199, 199); 14 border-radius: 20px; 15 cursor: pointer; 16 transition-duration: .3s; 17} 18 19.toggleSwitch::after { 20 content: ""; 21 position: absolute; 22 height: 40px; 23 width: 40px; 24 left: 0px; 25 background: conic-gradient(rgb(104, 104, 104),white,rgb(104, 104, 104),white,rgb(104, 104, 104)); 26 border-radius: 50%; 27 transition-duration: .3s; 28 box-shadow: 5px 2px 7px rgba(8, 8, 8, 0.308); 29} 30 31#checkboxInput:checked+.toggleSwitch::after { 32 transform: translateX(100%); 33 transition-duration: .3s; 34} 35/* Switch background change */ 36#checkboxInput:checked+.toggleSwitch { 37 background-color: rgb(153, 197, 151); 38 transition-duration: .3s; 39}
vinodjangid07
Vinod
MIT License