30-seconds-of-code/snippets/hamburger-button.md

title, tags

title	tags
Hamburger Button	interactivity,beginner

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

<button class="hb"></button>

.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);
}

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