Checkbox by 3bdel3ziz-T
#e8e8e8
1.burger { 2 width: 40px; 3 height: 40px; 4 display: flex; 5 flex-direction: column; 6 align-items: center; 7 justify-content: center; 8 user-select: none; 9 cursor: pointer; 10 transition: 300ms; 11 border-radius: 10px; 12} 13.burger input[type="checkbox"] { 14 appearance: none; 15 transition: 300ms; 16} 17 18.burger::before, 19.burger::after { 20 content: ""; 21 transition: 300ms; 22 transform-origin: center center; 23} 24 25.burger::before { 26 transform: translateY(8px); 27} 28.burger::after { 29 transform: translateY(-8px); 30} 31.burger .line, 32.burger::before, 33.burger::after { 34 width: 25px; 35 height: 2.1px; 36 display: block; 37 background-color: black; 38 border-radius: 5px; 39 position: absolute; 40} 41 42.burger .line:checked { 43 width: 0; 44 transition-delay: 100ms; 45} 46.burger:has(.line:checked)::before { 47 animation: animation1 400ms ease-out 0s 1 both; 48} 49.burger:has(.line:checked)::after { 50 animation: animation2 400ms ease-out 0s 1 both; 51} 52 53.burger:hover { 54 background: #aeaeae; 55 border-radius: 50%; 56} 57 58.burger:hover .line, 59.burger:hover::before, 60.burger:hover::after { 61 background: #e8e8e8; 62} 63 64.burger:active { 65 scale: 0.95; 66} 67@keyframes animation1 { 68 0% { 69 transform: translateY(8px) rotate(0deg); 70 } 71 50% { 72 transform: translateY(0px) rotate(0deg); 73 } 74 100% { 75 transform: translateY(0px) rotate(45deg); 76 } 77} 78@keyframes animation2 { 79 0% { 80 transform: translateY(-8px) rotate(0deg); 81 } 82 50% { 83 transform: translateY(0px) rotate(0deg); 84 } 85 100% { 86 transform: translateY(0px) rotate(-45deg); 87 } 88} 89
498 views
498 views
MIT License