Pure CSS3 Animated Hamburger Toggle

Author: SoClear
Views Total: 8,702 views
Official Page: Go to website
Last Update: July 8, 2015
License: MIT


Pure CSS3 Animated Hamburger Toggle


A pure CSS /CSS3 morphing toggle button concept which can be used as the navigation icon of the familiar hamburger menu in your webpage or web application. Powered by checkbox trick and CSS3 transitions and transforms.

How to use it:

The Html.

<div class="clear-menu-btn">
  <input type="checkbox">
  <span class="top"></span>
  <span class="middle"></span>
  <span class="bottom"></span>
  <span class="circle"></span>

The CSS / CSS3 rules.

.clear-menu-btn {
  position: relative;
  width: 100px;
  height: 100px;
  margin: 0 auto;
.clear-menu-btn input[type="checkbox"] {
  position: absolute;
  filter: alpha(opacity=0);
  opacity: 0;
  width: 100%;
  height: 100%;
.clear-menu-btn input[type="checkbox"]:hover { cursor: pointer; }
.clear-menu-btn input[type="checkbox"]:checked ~ .top, .clear-menu-btn input[type="checkbox"]:checked ~ .bottom { top: 50%; }
.clear-menu-btn input[type="checkbox"]:checked ~ .top {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
.clear-menu-btn input[type="checkbox"]:checked ~ .bottom {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
.clear-menu-btn input[type="checkbox"]:checked ~ .middle {
  filter: alpha(opacity=0);
  opacity: 0;
.clear-menu-btn input[type="checkbox"]:checked ~ .circle {
  filter: alpha(opacity=100);
  opacity: 1;
.clear-menu-btn span {
  position: absolute;
  display: block;
  width: 100px;
  height: 1px;
  background-color: #fff;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
  z-index: -1;
.clear-menu-btn .top { top: 15%; }
.clear-menu-btn .middle { top: 50%; }
.clear-menu-btn .bottom { top: 85%; }
.clear-menu-btn .circle {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  filter: alpha(opacity=0);
  opacity: 0;
  width: 120px;
  height: 120px;
  background-color: transparent;
  border-radius: 50%;
  border: 1px solid #fff;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -ms-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
  z-index: -1;

See also  16 Animated CSS3 Loaders - LoadLab

Leave a Reply

Your email address will not be published. Required fields are marked *