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

title, tags

title	tags
Hamburguer 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

• You need one button to middle bar.
• Use the pseudo-elements :before and :after to create bar top and bottom.
• Keep them in rows using position :relative in the :button and position :aboslute in :before and :after.
• Use :hover for rotate :before for 45deg, :after to -45deg and hide bar center using :background-color transparent.
• Bonus: You can use JavaScript to manipulate CSS and keep :X.

Browser support