Como fazer o botão aumentar de tamanho ao passar o mouse?
- #CSS
Olá, seja muito bem vindo(a), no artigo de hoje iremos aprender uma animação simples para aumentar botões ao usuário passar o mouse por cima do mesmo. Para isso iremos usar o CSS, mas antes precisamos ter o nosso button no HTML:
<button href="google.com"> Botão </button>
Após isso, no nosso CSS iremos recriar o código do nosso tutorial de criação de um botão em gradiente, apenas para deixar o botão melhor visível. O que nos interessa nesse tutorial aqui é colocar uma altura e largura ao botão e deixar a animação mais suave dando uma transição de 300ms.
button {
padding: 1rem;
margin: 1rem;
border-radius: 1rem;
border: none;
background: linear-gradient(90deg, #00dffc 0%, #05444d 100%);
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
color: #fff;
text-transform: uppercase;
width: 10.5rem;
height: 4rem;
transition: all 300ms ease-out;
}
Por fim, usamos um button:hover com uma largura e uma altura um pouco maior. Assim, inicialmente o botão terá o tamanho colocado inicialmente, porém quando o usuário passar o mouse por cima do botão ele aumenta de tamanho.
button:hover {
width: 11rem;
height: 5rem;
}
Uma animação bastante simples usando o CSS. Divirta-se utilizando esse tutorial em seus projetos, um abraço e até a próxima.
Artigo original: https://francileudo-frontend.blogspot.com/2022/10/como-fazer-o-botao-aumentar-de-tamanho.html
