<button id="burgerMenu" class="toggler"></button>

body {
  background-color: #000;
}

button {
  display: block;
  margin: 100px auto;
}

.toggler {
  position: relative;
  width: 35px;
  height: 3px;
  background-color: white;
  transition: background-color .1s;
  border: none;
  outline: none;
  &::before,
  &::after {
    content: '';
    position: absolute;
    width: inherit;
    height: inherit;
    background-color: inherit;
    transition: transform .1s ease-in, top .1s linear .1s;
    left: 0;
  }
  &::before {
    top: 9px;
  }
  &::after {
    top: -9px;
  }
}

.--active {
  background-color: transparent;
  transition: background-color .1s;
  &::before,
  &::after {
    background-color: white;
    top: 0;
    transition: top .1s linear, transform .1s ease-in .1s;
  }
  &::before {
    transform: rotate(45deg);
  }
  &::after {
    transform: rotate(-45deg);
  }
}

const menu = document.getElementById('burgerMenu');
menu.addEventListener('click', () => menu.classList.toggle('--active'));