8 Hamburger Toggle Animations In Pure HTML/CSS

Preview:

Description:

A collection of 8 awesome toggle animations created for hamburger buttons of your mobile & desktop navigation system.

Written in pure HTML and CSS/CSS3.

Available animations:

1. SQUEEZE
2. SLIDE
3. SLIP
4. ROTATE
5. ARROW
6. ARROW RIGHT
7. ARROW UP
8. ARROW DOWN

How to use it:

Load an animation of your choice in the document.

<link href="Burger/dist/styles.css" rel="stylesheet" type="text/css">
<link href="BurgerArrow/dist/styles.css" rel="stylesheet" type="text/css">
<link href="BurgerRotate/dist/styles.css" rel="stylesheet" type="text/css">
<link href="BurgerSlide/dist/styles.css" rel="stylesheet" type="text/css">
<link href="BurgerSlip/dist/styles.css" rel="stylesheet" type="text/css">
<link href="BurgerSqueeze/dist/styles.css" rel="stylesheet" type="text/css">

The example HTML to create a Rotate hamburger toggle animation. All possible animation classes:

• burger-arrow
• burger-rotate
• burger-slide
• burger-slip
• burger-squeeze

<div class="burger burger-rotate">
  <div class="burger-lines"></div>
</div>

Change the direction of the animation.

• burger-left (default)
• burger-right
• burger-up
• burger-down

<div class="burger burger-arrow burger-down">
  <div class="burger-lines"></div>
</div>

Set the state to open on page load.

<div class="burger burger-rotate open">
  <div class="burger-lines"></div>
</div>