<!DOCTYPE html>
<html>
  <head>
    <title>Efeito Menu Hamburger com CSS3</title>
  </head>
  <body>

    <div class="container">
      <div class="btn">
        <div class="btn-left"></div>
        <div class="btn-right"></div>
      </div>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  </body>
</html>
body{
  background: #DEB887;
}
.container{
  position: relative;
  width: 60px;
  margin: 20px auto;
}
.btn {
  position: absolute;
  width: 60px;
  height: 60px;
  top: 0;
  left: 0px;
  cursor: pointer;
}
.btn-left {
  background-color: #333;
  position: absolute;
  height: 8px;
  width: 30px;
  top: 30px;
  left: 0px;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
}
.btn-left:before {
  background-color: #333;
  position: absolute;
  width: 30px;
  height: 8px;
  content: "";
  top: -20px;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
}
.btn-left:after {
  background-color: #333;
  position: absolute;
  width: 30px;
  height: 8px;
  content: "";
  top: 20px;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
}

.btn-right {
  background-color: #333;
  position: absolute;
  height: 8px;
  width: 30px;
  top: 30px;
  left: 30px;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
}
.btn-right:before {
  background-color: #333;
  position: absolute;
  width: 30px;
  height: 8px;
  content: "";
  top: -20px;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
}
.btn-right:after {
  background-color: #333;
  position: absolute;
  width: 30px;
  height: 8px;
  content: "";
  top: 20px;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
}

.active .btn-left {
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
  background: transparent;
}
.active .btn-left:before {
  -webkit-transform: rotateZ(45deg) scaleX(1.4) translate(4px, 4px);
  transform: rotateZ(45deg) scaleX(1.4) translate(4px, 4px);
}
.active .btn-left:after {
  -webkit-transform: rotateZ(-45deg) scaleX(1.4) translate(4px, -4px);
  transform: rotateZ(-45deg) scaleX(1.4) translate(4px, -4px);
}
.active .btn-right {
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
  background: transparent;
}
.active .btn-right:before {
  -webkit-transform: rotateZ(-45deg) scaleX(1.4) translate(-4px, 4px);
  transform: rotateZ(-45deg) scaleX(1.4) translate(-4px, 4px);
}
.active .btn-right:after {
  -webkit-transform: rotateZ(45deg) scaleX(1.4) translate(-4px, -4px);
  transform: rotateZ(45deg) scaleX(1.4) translate(-4px, -4px);
}
$('.btn').click(function () {
  $(this).toggleClass('active');
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.