Edit in JSFiddle

body { background: #ffffff; }

a {
  display: inline-block;
  width:36px;
  height:36px;
  cursor: pointer;
  text-decoration: none;
}

a i {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 6px;
  color:#ffffff;
  font:bold 14px/.4 Helvetica;
  text-transform: uppercase;
  text-indent:-50px;
  background: #bf103c;
  transition:all .2s ease-out;
}

a i::before, a i::after {
  content:'';
  width: 36px;
  height: 6px;
  background: #bf103c;
  position: absolute;
  left:0;
  transition:all .2s ease-out;
}

a i::before { top: -12px; }
a i::after { bottom: -12px; }
a:hover i::before { top: -18px; }
a:hover i::after { bottom: -18px; }
a.active i { background: rgba(0,0,0,0); }

a.active i::before {
  top:0;
  -webkit-transform: rotateZ(45deg);
     -moz-transform: rotateZ(45deg);
      -ms-transform: rotateZ(45deg);
       -o-transform: rotateZ(45deg);
          transform: rotateZ(45deg);
}

a.active i::after {
  bottom:0;
  -webkit-transform: rotateZ(-45deg);
     -moz-transform: rotateZ(-45deg);
      -ms-transform: rotateZ(-45deg);
       -o-transform: rotateZ(-45deg);
          transform: rotateZ(-45deg);
}

/* Button placement */
a {
    position: absolute;
    top: 50px;
    left: 50px; 
}

<div>
    <a href="#"><i></i></a>
</div>

$('a').click(function() {
   $(this).toggleClass('active');
});