DEV Community 👩‍💻👨‍💻

Cover image for Animación de Button de Menú en HTML y CSS
Darwing  Castellanos
Darwing Castellanos

Posted on

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>
Enter fullscreen mode Exit fullscreen mode

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);
}
Enter fullscreen mode Exit fullscreen mode

ENLACE A CODEPEN

Top comments (0)

🌚 Friends don't let friends browse without dark mode.

Sorry, it's true.