<input type="checkbox" id="toggle-menu">
<label for="toggle-menu" id="btn-menu">
    <div class="M">
        <hr>
        <hr>
        <hr>
        <hr>
    </div>
    <span>ENU</span>
    <hr>
</label>

@import url(https://fonts.googleapis.com/css?family=Raleway:300);
body {
 background-color: #EF4836;
 padding-top: 80px;
}

#btn-menu {
 font-size: 70px;
 font-family: 'Raleway', sans-serif;
 cursor: pointer;
 width: 220px;
 height: 100px;
 display: block;
 margin: 0 auto;
}

#btn-menu span {
 transition: all .5s ease;
 color: #C0392B;
}

#btn-menu:hover span {
 color: #96281B;
}

#btn-menu:hover hr {
 background-color: #96281B !important;
}

.M {
 position: relative;
 width: 50px;
 height: 70px;
 top: -15px;
 left: 8px;
 margin: 0 auto;
 trasition: trasnlateZ(0);
 transition: all .5s ease;
 display: inline-block;
}

#btn-menu > hr {
 height: 3px;
 border: none;
 background-color: #C0392B;
 border-radius: 2px;
 position: relative;
 bottom: 20px;
 width: 220px;
 transition: all .5s ease;
}

.M hr {
 height: 3px;
 border: none;
 background-color: #C0392B;
 border-radius: 2px;
 width: 50px;
 position: absolute;
 top: 24px;
 transition: all .5s ease;
}

.M hr:nth-child(2) {
 width: 48px;
 top: 20px;
 left: -11px;
 transform: rotate(60deg);
}

.M hr:nth-child(3) {
 width: 48px;
 top: 20px;
 right: -11px;
 transform: rotate(-60deg);
}

.M hr:first-child,
.M hr:last-child {
 transform: rotate(90deg);
}

.M hr:first-child {
 left: -25px;
}

.M hr:last-child {
 left: 25px;
}

#toggle-menu {
 display: none;
}

#toggle-menu:checked + #btn-menu > hr {
 width: 0px;
}

#toggle-menu:checked + #btn-menu .M {
 animation: rotateOpen .5s forwards;
 top: 9px;
 left: 30%;
}

#toggle-menu:checked + #btn-menu span {
 opacity: 0;
 margin-left: -20px;
}

#toggle-menu:checked + #btn-menu .M hr:nth-child(2) {
 animation: toArrow1 .5s forwards;
}

#toggle-menu:checked + #btn-menu .M hr:nth-child(3) {
 animation: toArrow2 .5s forwards;
}

#toggle-menu:checked + #btn-menu .M hr:first-child {
 animation: toArrow3 .5s forwards;
}

#toggle-menu:checked + #btn-menu .M hr:last-child {
 animation: toArrow4 .5s forwards;
}

@keyframes rotateOpen {
 0% {
  transform: rotate(0deg);
 }
 100% {
  transform: rotate(-90deg);
 }
}

@keyframes toArrow1 {
 0% {
  transform: rotate(60deg);
 }
 100% {
  transform: rotate(90deg);
  top: 24px;
  width: 50px;
  left: 0px;
 }
}

@keyframes toArrow2 {
 0% {
  transform: rotate(-60deg);
 }
 95% {
  opacity: 1;
 }
 100% {
  transform: rotate(-90deg);
  top: 24px;
  width: 50px;
  right: 0px;
  opacity: 0;
 }
}

@keyframes toArrow3 {
 0% {
  transform: rotate(90deg);
  left: -25px;
 }
 100% {
  transform: rotate(120deg);
  left: 2px;
  width: 32px;
  top: 9px;
 }
}

@keyframes toArrow4 {
 0% {
  transform: rotate(90deg);
  left: 25px;
 }
 100% {
  transform: rotate(60deg);
  left: 17px;
  width: 32px;
  top: 9px;
 }
}

/*
 * something different than all the hamburger to x animations. 
 * could be used for an off canvas sliding menu.
 *
 *  edit-thanks for all the views on this! awesome!
 */