01hamburger-menu-bt.css

.hamb-bt{
  display: inline-block;
  position: relative;
  width: 50px;
  height: 50px;
  background-color: #C8E6C9;
}
.hamb-line{
  position: absolute;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 80%;
  height: 6%;
  background-color: #388E3C;
  transition: transform .2s; 
}
.hamb-line.line1{
  top: 25%;
}
.hamb-line.line2{
  top: 50%;
}
.hamb-line.line3{
  top: 75%;
}
.hamb-line.line1.open,.hamb-line.line2.open{
  top: 50%;
  transform: translate(-50%,-50%) rotateZ(45deg);
}
.hamb-line.line3.open{
  top: 50%;
  transform: translate(-50%,-50%) rotateZ(-45deg);
}

02hamburger-menu-bt.html

<div class="hamb-bt">
  <div class="hamb-line line1"></div>
  <div class="hamb-line line2"></div>
  <div class="hamb-line line3"></div>
</div>

03hamburger-menu-bt.js

const hamb_bt = document.getElementsByClassName('hamb-bt');
const hamb_lines = document.getElementsByClassName('hamb-line');
[...hamb_bt].forEach(el=>{
  el.addEventListener('click',hamb_toggle);
});

function hamb_toggle(){
  [...hamb_lines].forEach(el=>{
    el.classList.toggle('open');
  });
}