<!-- Inspired by Back To Close by sandeep virk
https://dribbble.com/shots/1980182-Back-to-Close -->

<h1 class="Title">Click it, it's awesome! :)</h1>

<div id="icon" class="Icon">
  <span></span>
  <span></span>
  <span></span>
</div>

html {
  height: 100%;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  height: 100%;
  font-family: "Helvetica Neue";
  background: #59489d;
}

* {
  margin: 0;
  padding: 0;
}

.Title {
  margin-bottom: 40px;
  color: #fff;
}

.Icon {
  width: 50px;
  height: 50px;
  position: relative;
  transform: rotate(0deg);
  transition: .5s ease-in-out;
  cursor: pointer;
}

.Icon span {
  display: block;
  position: absolute;
  left: 0;
  top: 23px;
  height: 8px;
  width: 100%;
  background: #fff;
  border-radius: 4px;
  transform: rotate(0deg);
  transition: .2s ease-in-out;
}

.Icon span:nth-child(1),
.Icon span:nth-child(3) {
  width: 50%;
  transform: rotate(45deg);
}

.Icon span:nth-child(1) {
  left: 3px;
  top: 15px;
}

.Icon span:nth-child(2) {
  transform: rotate(-45deg);
}

.Icon span:nth-child(3) {
  left: 20px;
  top: 31px;
}

.Icon.open span:nth-child(1),
.Icon.open span:nth-child(3) {
    left: -1px;
}

.Icon.open span:nth-child(1) {
  top: 15px;
  transform: rotate(135deg);
}

.Icon.open span:nth-child(2) {
  transform: rotate(0deg);
}

.Icon.open span:nth-child(3) {
  top: 31px;
  transform: rotate(45deg);
}

var icon = document.getElementById("icon");

icon.onclick = function() {
  if (this.className === "Icon") {
    this.className = "Icon open"; 
  } else {
    this.className = "Icon";
  }
};