Checkbox by AKAspidey01
#e8e8e8
1.checkboxtoggler { 2 width: 3em; 3 display: flex; 4 flex-direction: column; 5 gap: 0.7em; 6 cursor: pointer; 7} 8 9.line-1 { 10 background: #df6447; 11 height: 0.3em; 12 border-radius: 10em; 13 transition-duration: 500ms; 14} 15 16.line-2 { 17 background: #df6447; 18 height: 0.3em; 19 border-radius: 10em; 20 transition-duration: 500ms; 21} 22 23.line-3 { 24 background: #df6447; 25 height: 0.3em; 26 border-radius: 10em; 27 transition-duration: 500ms; 28} 29 30#toggleChecker { 31 height: 3em; 32 width: 100%; 33 display: none; 34} 35 36#toggleChecker:checked + #togglerLable .checkboxtoggler .line-1 { 37 -webkit-transform: rotate(45deg) translateY(0.7em) translateX(0.7em); 38 -ms-transform: rotate(45deg) translateY(0.7em) translateX(0.7em); 39 transform: rotate(45deg) translateY(0.7em) translateX(0.7em); 40} 41 42#toggleChecker:checked + #togglerLable .checkboxtoggler .line-2 { 43 -webkit-transform: rotate(-45deg) translateY(0em) translateX(0.1em); 44 -ms-transform: rotate(-45deg) translateY(0em) translateX(0.1em); 45 transform: rotate(-45deg) translateY(0em) translateX(0.1em); 46} 47 48#toggleChecker:checked + #togglerLable .checkboxtoggler .line-3 { 49 transform: scaleX(0); 50 transform-origin: left; 51}
1.6K views
1.6K views
MIT License