JSFiddle - React, Tailwind, and code Playground

by Saurabh Sonawane

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<a href="#">
  <span></span>
</a>

CSS

a {
  display: inline-block;
  width: 50px;
  height: 50px;
  background:blue;
  border-radius: 50%
}

a span {
  display: block;
  background: #FFFFFF;
  height: 2px;
  width: 18px;
  position: relative;
  margin-top: 24px;
  margin-left: 13px;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

a span:before,
a span:after {
  content: "";
  display: block;
  height: 2px;
  position: absolute;
  background: #FFFFFF;
  -webkit-transition: all 0.3s;
  /* Safari */
  transition: all 0.3s;
}

a span:before {
  margin-top: -8px;
  width: 24px;
}

a span:after {
  margin-top: 8px;
  width: 14px;
}

a:hover span {
  width: 24px
}

a:hover span:before,
a:hover span:after {
  width: 24px
}

a.active {
  background:red
}

a.active span {
  width: 24px;
  background:transparent
}

a.active span:before {
  width: 24px;
  -webkit-transform: translateY(8px) translateX(0) rotate(45deg);
  -moz-transform: translateY(8px) translateX(0) rotate(45deg);
  -ms-transform: translateY(8px) translateX(0) rotate(45deg);
  transform: translateY(8px) translateX(0) rotate(45deg);
}

a.active span:after {
  width: 24px;
  -webkit-transform: translateY(-8px) translateX(0) rotate(-45deg);
  -moz-transform: translateY(-8px) translateX(0) rotate(-45deg);
  -ms-transform: translateY(-8px) translateX(0) rotate(-45deg);
  transform: translateY(-8px) translateX(0) rotate(-45deg);
}

JavaScript

$(document).ready(function() {
  var hamburger = $('a');
  hamburger.click(function() {
    hamburger.toggleClass('active');
    return false;
  });
});