Divided Hamburger
Hamburger with an awesome animation when active
<button class="divided-hamburger"> <input type="checkbox" class="trigger"> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> </button>
.divided-hamburger { background-color: transparent; width: calc(50px * 1.2); height: 50px; position: relative; } .divided-hamburger > .trigger:checked ~ span:nth-of-type(1) { left: calc(50px/ 8); top: calc(50px/ 6); } .divided-hamburger > .trigger:hover ~ span { background-color: #652f94; } .divided-hamburger > .trigger:checked ~ span:nth-of-type(2) { left: calc(50% - (50px/ 8)); top: calc(50px/ 6); } .divided-hamburger > .trigger:checked ~ span:nth-of-type(3) { left: -50%; opacity: 0; } .divided-hamburger > .trigger:checked ~ span:nth-of-type(4) { left: 100%; opacity: 0; } .divided-hamburger > .trigger:checked ~ span:nth-of-type(5) { left: calc(50px / 8); top: calc(50px/ 2); } .divided-hamburger span:nth-of-type(even) { left: 50%; border-radius: 0 4px 4px 0; } .divided-hamburger > .trigger:checked ~ span:nth-of-type(6) { left: calc(50% - (50px/ 8)); top: calc(50px/ 2); } .divided-hamburger span:nth-of-type(odd) { left: 0px; border-radius: 4px 0 0 4px; } .divided-hamburger > span:nth-of-type(1), .divided-hamburger > span:nth-of-type(2) { top: 0; } .divided-hamburger > .trigger:checked ~ span:nth-of-type(2), .divided-hamburger > .trigger:checked ~ span:nth-of-type(5) { transform: rotate(-45deg); } .divided-hamburger > span:nth-of-type(5), .divided-hamburger > span:nth-of-type(6) { top: calc((50px/ 3) * 2); } .divided-hamburger > span:nth-of-type(3), .divided-hamburger > span:nth-of-type(4) { top: calc(50px/ 3); } .divided-hamburger > .trigger:checked ~ span:nth-of-type(1), .divided-hamburger > .trigger:checked ~ span:nth-of-type(6) { transform: rotate(45deg); } .divided-hamburger > span { background-color: rgb(67,84,147); display: block; position: absolute; height: 10px; width: 50%; border-radius: 4px; transition: .25s ease-in-out; } .divided-hamburger > .trigger { position: absolute; z-index: 3; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
csslab
CSSLab is a platform dedicated to providing high-quality, scalable & reusable components that can be easily slotted into all kinds of web applications.
©2025 CSSLab, all rights reserved.