Efeitos de Hover

Parte da seção CSS Mastery do Journey de HTML da Coddy — lição 8 de 43.

A pseudo-classe :hover permite que você altere o estilo de um elemento quando o usuário passa o mouse sobre ele.

Aqui está um exemplo simples que altera a cor do texto quando você passa o mouse sobre um botão:

button {
  color: black;
}

button:hover {
  color: red;
}

Neste exemplo, o texto do botão é preto por padrão, mas quando você passa o mouse sobre ele, o texto fica vermelho.

Teste seus conhecimentos

Esta lição inclui um quiz rápido. Comece a lição para respondê-lo e acompanhar seu progresso.

Teste seus conhecimentos

Esta lição inclui um quiz rápido. Comece a lição para respondê-lo e acompanhar seu progresso.

Desafio

Fácil

Você tem um botão que precisa mudar de estilo ao passar o mouse. Sua tarefa é:

Use a pseudo-classe :hover para alterar a cor de fundo do botão para green quando o usuário passar o mouse sobre ele.
Aplique uma sombra de caixa ao botão durante o efeito de hover para fazê-lo parecer levantado. Use box-shadow desta forma:

box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.2);

Isso adiciona uma sombra com deslocamento, desfoque e cor.

Folha de consulta

A pseudo-classe :hover altera o estilo de um elemento quando o usuário passa o mouse sobre ele:

button {
  color: black;
}

button:hover {
  color: red;
}

Neste exemplo, o texto do botão é preto por padrão, mas quando você passa o mouse sobre ele, o texto fica vermelho.

Experimente você mesmo

<html>
<head>
    <title>Hover Effects</title>
    <style>
        .hover-button {
            padding: 10px 20px;
            font-size: 16px;
            background-color: #3498db;
            color: white;
            border: none;
            border-radius: 5px;
        }
        /* CSS solution goes here */
        
    </style>
</head>
<body>
    <button class="hover-button">Hover over me!</button>
</body>
</html>

Teste seus conhecimentos

Esta lição inclui um quiz rápido. Comece a lição para respondê-lo e acompanhar seu progresso.