<div class="hamburger">
  <input type="checkbox" id="hamburger" />
  <label for="hamburger" class="lines">
    <div class="line diagonal part-1"></div>
    <div class="line horizontal"></div>
    <div class="line diagonal part-2"></div>
  </label>
</div>
body {
  background-color: #5FD9FF;
}

.hamburger * {
  transition:all 0.5s ease-in-out;
  -webkit-transition:all 0.5s ease-in-out;
  box-sizing:border-box;
}

.hamburger {
  position:relative;
  margin:100px auto;
  height:50px;
  width:50px;
}

.hamburger input[type=checkbox] {
  display:none;
}

.hamburger label {
  cursor:pointer;
  position:absolute;
  z-index:99;
  height:100%;
  width:100%;
  top:10px;
  left:0;
}

.hamburger .line {
  position:absolute;
  height:5px;
  width:100%;
  background-color:#000;
}

.hamburger .diagonal.part-1 {
  position:relative;
  float:left;
  background-color: #fff;
}

.hamburger .horizontal {
  position:relative;
  float:left;
  margin-top:6px;
  background-color: #fff;
}

.hamburger .diagonal.part-2 {
  position:relative;
  float:left;
  margin-top:6px;
  background-color: #fff;
}

.hamburger input[type=checkbox]:checked ~ .lines > .horizontal {
  transform:scale(2,1);
  -webkit-transform:scale(2,1);
  opacity: 0;
}

.hamburger input[type=checkbox]:checked ~ .lines > .diagonal.part-1 {
  transform:rotate(-135deg);
  -webkit-transform:rotate(-135deg);
  margin-top:10px;
}

.hamburger input[type=checkbox]:checked ~ .lines > .diagonal.part-2 {
  transform:rotate(135deg);
  -webkit-transform:rotate(135deg);
  margin-top:-16px;
}
/*
  Developed with love by Blu Frame

  http://blufra.me  
*/
Rerun