Botón de menú CSS

Feb 16, 2023

0

Read Time:47 Second

<style>
button.ejemplo {
display: flex;
flex-direction: column;
width: 3rem;
height: 3rem;
border: 0;
background: transparent;
gap: .65rem;
}

button.ejemplo > div {
background: black;
height: 2px;
width: 100%;
border-radius: 5px;
transition: all .5s;
transform-origin:left;
}

button.ejemplo:hover div:first-child {
transform: rotate(45deg);
}
button.ejemplo:hover div:nth-child(2) {
opacity: 0;
}
button.ejemplo:hover div:last-child {
transform: rotate(-45deg);
}

</style>

<button class="ejemplo">
<div></div>
<div></div>
<div></div>
</button>