Animated Hamburger Toggle Icons In Pure CSS – hamburgers.css

Preview:

Description:

hamburgers.css helps you create various types of CSS3 animated toggle icons for hamburger navigation toggles.

Basic usage:

Just include the hamburgers.css in the head section of the webpage and done.

<link href="dist/hamburgers.css" rel="stylesheet">

The basic html structure for the hamburger toggle icon.

<div class="hamburger">
  <div class="hamburger-box">
    <div class="hamburger-inner"></div>
  </div>
</div>

Add the CSS class of your choice to the hamburger toggle icons. Available classes:

• hamburger–3dx
• hamburger–3dx-r
• hamburger–3dy
• hamburger–3dy-r
• hamburger–3dxy
• hamburger–3dxy-r
• hamburger–arrow
• hamburger–arrow-r
• hamburger–arrowalt
• hamburger–arrowalt-r
• hamburger–arrowturn
• hamburger–arrowturn-r
• hamburger–boring
• hamburger–collapse
• hamburger–collapse-r
• hamburger–elastic
• hamburger–elastic-r
• hamburger–emphatic
• hamburger–emphatic-r
• hamburger–minus
• hamburger–slider
• hamburger–slider-r
• hamburger–spin
• hamburger–spin-r
• hamburger–spring
• hamburger–spring-r
• hamburger–stand
• hamburger–stand-r
• hamburger–squeeze
• hamburger–vortex
• hamburger–vortex-r

<div class="hamburger hamburger--collapse">
  <div class="hamburger-box">
    <div class="hamburger-inner"></div>
  </div>
</div>

Add the CSS class ‘is-active’ to the toggle icon to make it active.

<div class="hamburger hamburger--collapse is-active">
  <div class="hamburger-box">
    <div class="hamburger-inner"></div>
  </div>
</div>

Changelog:

v1.1.3 (06/23/2019)

• !important for types that rely on background-color: transparent.

v1.1.2 (12/04/2018)

• Fixed: !important for types that rely on background-color: transparent.
• Fixed: Change default value of $hamburger-active-hover-opacity to $hamburger-hover-opacity.
• Fixed: Change default value of $hamburger-active-hover-filter to $hamburger-hover-filter.
• Fixed: Removed $hamburger-hover-transition-duration and $hamburger-hover-transition-timing-function—types rely on custom timing, which render these useless.
• Added: Changing color of the hamburger in the active state

v0.9.3 (08/13/2018)

• Added new types