467 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: 90px; 12 height: 30px; 13 background-color: rgb(206, 206, 206); 14 border-radius: 40px; 15 cursor: pointer; 16 transition-duration: .3s; 17} 18 19.toggleSwitch::after { 20 content: ""; 21 position: absolute; 22 height: 30px; 23 width: 50%; 24 left: 0px; 25 background: conic-gradient(rgba(26, 26, 26, 0.555),white,rgba(26, 26, 26, 0.555),white,rgba(26, 26, 26, 0.555)); 26 border-radius: 40px; 27 transition-duration: .3s; 28 box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.281); 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(124, 173, 206); 38 transition-duration: .3s; 39}
vinodjangid07
Vinod
MIT License