Hamburger button

By adding .hamburger to <button> it will be a button with hamburger style, you can use this component for menus or other interactive elements. .active class will change hamburger to a cross.

Accessibility matters!

You do not need to add anything inside the hamburger button element but it is necessary to set an aria-label HTML attribute for accessibility purposes. Read more about aria-label usage.

index.html

<button class="hamburger" aria-label="Open menu"/></button>
<button class="hamburger active" aria-label="Open menu"/></button>

Sizes

To change the button size use size setter classes. These classes just set a font-size property so it is possible to change it yourself by writing custom CSS.

index.html

<button class="hamburger size-xs" aria-label="Open menu"></button>
<button class="hamburger size-lg" aria-label="Open menu"></button>
<button class="hamburger size-2x" aria-label="Open menu"></button>
<button class="hamburger size-3x" aria-label="Open menu"></button>

Colors

There are helper classes for styling elements like button, first read about color setter classes for having button with diffrent background and text color.

index.html

<button class="hamburger color-success" aria-label="Open hamburger"></button>
<button class="hamburger color-warning" aria-label="Open hamburger"></button>
<button class="hamburger color-purple" aria-label="Open hamburger"></button>
<button class="hamburger color-red" aria-label="Open hamburger"></button>