Pure CSS3 Animated Hamburger Toggle

Preview:

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;
}