<div class="btn">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>

.btn {
  width: 50px;
  height: 50px;
  padding: 4px;
  cursor: pointer;
}

.btn span {
  display: block;
  height: 6px;
  background: #000;
  transition: 0.14s linear;
}

.btn span:not(:first-child) {
  margin-top: 6px;
}

.btn span:nth-of-type(1),
.btn span:nth-of-type(3) {
  width: 50px;
}
.btn span:nth-of-type(2),
.btn span:nth-of-type(4) {
  width: 40px;
}

.btn span.none {
  display: none;
}

.btn span:nth-of-type(1).twist1 {
  transform: rotate(45deg) translateX(10px) translateY(10px);
  background-color: red;
}
.btn span:nth-of-type(3).twist2 {
  transform: rotate(-45deg) translateX(-2px) translateY(0px);
  background-color: red;
}

document.querySelector(".btn").addEventListener("click", btnHandler);

function btnHandler() {
  let line = document.querySelectorAll(".btn span");

  line[1].classList.toggle("none");
  line[3].classList.toggle("none");
  line[0].classList.toggle("twist1");
  line[2].classList.toggle("twist2");
}