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

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)

							
							
					<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Botão com Efeito Hover</title>
    <link rel="stylesheet" href="estilo.css">
</head>
<body>
    <button class="meu-botao">Clique Aqui</button>
</body>
</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)

							
							
					.meu-botao {
    background-color: #007bff; /* Cor de fundo azul */
    color: white; /* Cor do texto branco */
    border: none; /* Sem borda */
    padding: 10px 20px; /* Espaçamento interno */
    cursor: pointer; /* Cursor mão */
    transition: background-color 0.3s ease-in; /* Transição suave da cor de fundo */
}

.meu-botao:hover {
    background-color: #0056b3; /* Cor de fundo mais escura no hover */
}

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.