Falta pouco!

0 dias

0 horas

0 min

0 seg

1
resposta

Botões hover -html

  .hero-text button {
    margin-top: 1rem;
    padding: 0.8rem 3rem;
    border: none;
    border-radius: 20px;
    background: linear-gradient(to right, #80b0f7, #3571e2);
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;
  }
  
  .hero-text button:hover {
    color: #ffffff;
    box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.2);
    border-radius: 12px;
    border-color: #3571e2;

Antes: Insira aqui a descrição dessa imagem para ajudar na acessibilidade
Depois: Insira aqui a descrição dessa imagem para ajudar na acessibilidade

1 resposta

Oi, Estudante! Como vai?

Agradeço por compartilhar seu código com a comunidade Alura.

Gostei bastante de como você aplicou o :hover no botão, criando um efeito suave com transition e destacando o botão com box-shadow. Esse detalhe deixa a interface mais interativa e agradável.

Uma dica interessante para o futuro é usar transform para dar uma leve impressão de movimento no botão. Veja este exemplo:


.hero-text button:hover {
    transform: scale(1.05);
}

Esse código faz o botão aumentar levemente quando o usuário passa o mouse, dando mais destaque à interação.

Alura Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!