Pure CSS3 Animated Hamburger Toggle

Category: CSS & CSS3 , Menu & Navigation | July 8, 2015
Author: SoClear
Views Total: 5,853
Official Page: Go to website
Last Update: July 8, 2015
License: MIT

Preview:

Pure CSS3 Animated Hamburger Toggle

Description:

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>
</div>

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