<div class="top">
  <button id="toggle" class="toggle"></button>
</div>
.top {
  background: #ccc;
  position: relative;
  padding-top: 2.5em;
}
/* hamburger menu */
.toggle {
  position: absolute;
  top: 10px;
  left: 10px;
  background: transparent;
  padding: 0;
  margin: 0;
  cursor: pointer;
  outline: none;
  width: 30px;
  height: 21px;
  border: none;
  border-top: 3px solid #fff;
  border-bottom: 3px solid #fff;
  text-decoration: none;
  color: #fff;
  outline: 0;
}
.toggle:before,
.toggle:after {
  content: "";
  display: block;
  width: 30px;
  height: 3px;
  top: 6px;
  left: 0;
  background: #fff;
  position: absolute;
}
.toggle,
.toggle:before,
.toggle:after {
  transition: all 0.3s ease;
  transform: rotate(0deg);
}
.hamburgerOn {
  border-color: transparent;
}
.hamburgerOn:before {
  transform: rotate(45deg);
}
.hamburgerOn:after {
  transform: rotate(-45deg);
}
(function (d) {
  "use strict";
  const myToggle = d.querySelector("#toggle");
  myToggle.addEventListener("click", toggleHamburger);

  function toggleHamburger(e){
    e.target.classList.toggle('hamburgerOn');
  }
  
})(document);
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.