Switch by YAYaya12085
#212121
1#checkbox { 2 display: none; 3} 4 5.toggle { 6 position: relative; 7 width: 40px; 8 height: 40px; 9 cursor: pointer; 10 display: flex; 11 flex-direction: column; 12 align-items: flex-start; 13 justify-content: center; 14 gap: 10px; 15 transition-duration: .5s; 16} 17 18.bars { 19 width: 100%; 20 height: 4px; 21 background-color: rgb(92, 130, 255); 22 border-radius: 4px; 23} 24 25#bar2 { 26 transition-duration: .8s; 27} 28 29#bar1 { 30 width: 50%; 31} 32 33#bar2 { 34 width: 75%; 35} 36 37#checkbox:checked + .toggle .bars { 38 position: absolute; 39 transition-duration: .5s; 40} 41 42#checkbox:checked + .toggle #bar2 { 43 transform: scaleX(0); 44 transition-duration: .1s; 45} 46 47#checkbox:checked + .toggle #bar1 { 48 width: 100%; 49 transform: rotate(45deg); 50 transition-duration: .5s; 51} 52 53#checkbox:checked + .toggle #bar3 { 54 width: 100%; 55 transform: rotate(-45deg); 56 transition-duration: .5s; 57} 58 59#checkbox:checked + .toggle { 60 transition-duration: .5s; 61 transform: rotate(180deg); 62}
5K views
Variation of aswitch
MIT License