Create custom hamburger menu buttons with this free online generator. Adjust the button size, colors, line spacing, border, and transition while checking the result with a real-time preview. HTML, CSS, and JavaScript code is generated automatically, so you can copy the code you need and use it directly in your website or web project.
Sponsored Links
Start with a template
(Your current settings will be reset.)
Customization
Preview
Click the button to preview the open and closed states.
<button id="menuButton" type="button" class="menu-button" aria-labelledby="menuButtonLabel">
<span class="menu-button__line">
<span id="menuButtonLabel" style="display: none">Menu Button</span>
</span>
</button>.menu-button {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
row-gap: 6px;
width: 56px;
height: 56px;
border: 1px solid #333333;
background-color: #ffffff;
}
.menu-button__line,
.menu-button::before,
.menu-button::after {
content: "";
width: 28px;
height: 2px;
background-color: #333333;
transition: transform 0.3s, opacity 0.3s;
}
.menu-button.is-opened .menu-button__line {
opacity: 0;
}
.menu-button.is-opened::before {
transform: translateY(8px) rotate(45deg);
}
.menu-button.is-opened::after {
transform: translateY(-8px) rotate(-45deg);
}const menuButton = document.getElementById("menuButton");
let isMenuOpened = false;
function toggleMenu() {
isMenuOpened = !isMenuOpened;
if (isMenuOpened) {
// Code to be executed when the menu is opened
menuButton.classList.add("is-opened");
} else {
// Code to be executed when the menu is closed
menuButton.classList.remove("is-opened");
}
}
menuButton.addEventListener("click", toggleMenu);const menuButton = $("#menuButton");
let isMenuOpened = false;
function toggleMenu() {
isMenuOpened = !isMenuOpened;
if (isMenuOpened) {
// Code to be executed when the menu is opened
menuButton.addClass("is-opened");
} else {
// Code to be executed when the menu is closed
menuButton.removeClass("is-opened");
}
}
menuButton.on("click", toggleMenu);
Notes
This tool is intended for modern browsers. Some generated CSS may not work in older browsers.
This site uses modern-normalize.css. The preview may look slightly different depending on the reset CSS or other styles used in your project.
