Creating an animated hamburger menu icon with CSS-only

January 13, 2023

Using an animated hamburger menu icon is the most intuitive way to improve the user interface and experience of a web application or site.

Here is a small tutorial on creating an animated hamburger menu icon with CSS only, there is no involvement of any JavaScript code.

Here is a demo of the hamburger icon — just hover over it.

Let’s make this CSS-only animated hamburger icon.

First, add the necessary Divs where you wish to show.

<div class="menu-icon">
  <div></div>
</div>

Now we need to add CSS styles and animation.

So here is the CSS section:

.menu-icon {
  margin: 1em;
  width: 48px;
}
.menu-icon:after, 
.menu-icon:before, 
.menu-icon div {
  background-color: #000;
  border-radius: 3px;
  content: '';
  display: block;
  height: 5px;
  margin: 7px 0;
  transition: all .2s ease-in-out;
}
.menu-icon:hover:before {
  transform: translateY(12px) rotate(135deg);
}
.menu-icon:hover:after {
  transform: translateY(-12px) rotate(-135deg);
}
.menu-icon:hover:before {
  transform: translateY(12px) rotate(135deg);
}
.menu-icon:hover:after {
  transform: translateY(-12px) rotate(-135deg);
}
.menu-icon:hover div {
  transform: scale(0);
}

I made the icon’s width 48 Pixels by following modern-day UI/UX rules, but you can change it according to the size you want. Make sure whatever size you choose, it should be clearly visible and clickable to all the users.

I hope this would be helpful for your project.