30 seconds of CSS

  Back to Home

Hamburguer Button  interactivitybeginner

This is a way to build simple hamburger button for menu bar.

HTML
<button class="hb"></button>
CSS
.hb,
.hb:before,
.hb:after {
  position: relative;
  width: 30px;
  height: 5px;
  border: none;
  outline: none;
  background-color: #333;
  border-radius: 3px;
  transition: 0.5s;
  cursor: pointer;
}

.hb:before,
.hb:after {
  content: '';
  position: absolute;
  top: -7.5px;
  left: 0;
}

.hb:after {
  top: 7.5px;
}

.hb:hover {
  background-color: transparent;
}

.hb:hover:before,
.hb:hover:after {
  top: 0;
}

.hb:hover::before {
  transform: rotate(45deg);
}

.hb:hover::after {
  transform: rotate(-45deg);
}
Demo
Explanation
  • Use a <button> element for the middle bar of the hamburger icon.
  • Use the ::before and ::after pseudo-elements to create the top and bottom bars of the icon.
  • Use position: relative on the <button> and position: absolute on the pseudo-elements to place them appropriately.
  • Use the :hover pseudo-selector to rotate :before to 45deg and :after to -45deg and hide the center bar using:background-color transparent.
Browser support

100.0%