Como criar botão com efeito hover (nível iniciante)

Sumário

Para criar um botão com HTML e estilizá-lo com CSS, incluindo um efeito de hover com transição suave (ease-in), siga os passos abaixo:

Passo 1: Estrutura HTML

Primeiro, você precisa da estrutura básica do HTML. Vamos criar um botão usando a tag <button>.

Página HTML (index.html)

Passo 2: Arquivo CSS

Agora, vamos criar o arquivo de estilos CSS, estilo.css, para adicionar estilos ao nosso botão e aplicar o efeito de hover com transição ease-in.

Estilizando o Botão

Cor de Fundo: Defina uma cor de fundo inicial para o botão.
Cor do Texto: Escolha uma cor para o texto do botão para garantir que ele seja legível.
Bordas: Adicione bordas ao botão para melhorar a sua aparência.

Padding: Ajuste o espaçamento interno do botão para que o texto tenha espaço suficiente ao redor.
Cursor: Altere o cursor para pointer para indicar que o botão é clicável.

Adicionando Efeito Hover

:hover: Use o pseudo-seletor :hover para definir os estilos quando o mouse estiver sobre o botão.
Transição: Aplique uma propriedade de transição com ease-in para suavizar a mudança de estado.

Código CSS (style.css)

Explicação do Efeito Hover e Transição

Hover: Ao passar o mouse sobre o botão, o seletor :hover é ativado, mudando a cor de fundo do botão para uma tonalidade mais escura.
Transição Ease-in: A propriedade transition é usada para suavizar a mudança de cores. O valor 0.3s define a duração da transição (300 milissegundos), e ease-in faz com que a transição comece lentamente e depois acelere.

Com esses passos, você criou um botão com efeito hover que utiliza uma transição suave de ease-in, melhorando a interatividade e a experiência do usuário.

Passo 1: Estrutura HTML