Animación de Button de Menú en HTML y CSS

Primero creamos el bloque del button con html con tres div, los cuales serán las barras.

<button>
  <div></div>
   <div></div>
   <div></div>
</button>

Luego creamos los estilos para darle forma al menú, tanto al tag button como a los div.

Por último, creamos los hover con las animaciones.

button{
  display:flex;
  flex-direction:column;
  width:3.5rem;
  heigth:3.5rem;
  border:0;
  background:transparent;
  gap:.65rem;

}
button > div{
  background: violet;
  height: 5px;
  width: 100%;
  border-radius:5px;
  transition:all .4s;
  transform-origin:left;
}
button:hover div:first-child{
  transform:rotate(45deg);
}
button:hover div:nth-child(2){
  opacity:0;
}
button:hover div:last-child{
  transform:rotate(-45deg);
}

ENLACE A CODEPEN