Animated hamburger button compatible with Bootstrap

Component: SBE Hamburger Animated

Easy to integrate into your websites, this visual component replaces the standard Bootstrap Navbars hamburger.

Using this component

For other applications, copy the HTML and CSS source code below.

Animation with double effect:

Hover over the button: The lines spread apart by 8 pixels.
Left-click: The button lines transform into a cross with a rotation effect.

Try the animation yourself

Component configuration in HTML code

Colors: Use standard Bootstrap classes such as:
A single class .text‑bg‑warning that manages both text and background color.
Two classes .text‑primary for the text plus .bg‑white for the background.
data‑bs‑target: This attribute contains the identifier of the target menu to pull down.
aria-label: The descriptive text for screen readers is included in this attribute.

Component code

HTML code: The HTML code must replace the standard button code of the Navbar component.
CSS code: Custom CSS code manages the button animations.
JavaScript code: Use of Bootstrap code for the Navbar component.
No custom JavaScript code is required

<!-- Code HTML: data-bs-target = drop-down menu identifier -->
<button
  class="text-bg-warning navbar-toggler collapsed"
  type="button"
  data-bs-toggle="collapse"
  data-bs-target="#navbarNav"
  aria-label="Toggle navigation"
  aria-expanded="false">
  <span></span>></button>

/* Code CSS: Overloading .navbar-toggler class to manage animation */
.navbar-toggler {
  position: relative;
  width: 2.75rem;
  height: 2.75rem;
  border: none;
  border-radius: 50%;
  transition: transform 0.35s;
}
.navbar-toggler:focus {
  box-shadow: none;
}
.navbar-toggler span {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: 1.375rem;
  height: 2px;
  background-color: currentcolor;
  transform: translate(-50%, -50%);
  transition: background-color 0.18s;
}
.navbar-toggler span::before, .navbar-toggler span::after {
  content: "";
  position: absolute;
  top: 0px;
  left: 0;
  display: block;
  width: 1.375rem;
  height: 2px;
  background-color: currentcolor;
  transform: translateY(-6px);
  transition: transform 0.35s;
  transform-origin: 50% 50%;
}
.navbar-toggler span::after {
  transform: translateY(6px);
}
.navbar-toggler:hover span::before {
  transform: translateY(-8px);
}
.navbar-toggler:hover span::after {
  transform: translateY(8px);
}
.navbar-toggler[aria-expanded=true] {
  transform: rotate(90deg);
}
.navbar-toggler[aria-expanded=true] span {
  background-color: transparent;
}
.navbar-toggler[aria-expanded=true] span::before {
  transform: translateY(0) rotate(45deg);
}
.navbar-toggler[aria-expanded=true] span::after {
  transform: translateY(0) rotate(-45deg);
}