Pure CSS3 Animated Hamburger Toggle

Category: CSS & CSS3 , Menu & Navigation | July 8, 2015
Views Total:8,749 views
Official Page:Go to website
Last Update:July 8, 2015


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;

You Might Be Interested In:

Leave a Reply