Effetti al passaggio del mouse

Fa parte della sezione Padronanza di CSS del percorso HTML di Coddy. Lezione 8 di 43.

La pseudo-classe :hover ti permette di modificare lo stile di un elemento quando l’utente ci passa sopra con il mouse.

Ecco un semplice esempio che cambia il colore del testo quando passi il puntatore sopra un pulsante:

button {
  color: black;
}

button:hover {
  color: red;
}

In questo esempio, il testo del pulsante è nero per impostazione predefinita, ma quando ci passi sopra il puntatore, il testo diventa rosso.

Sfida

Facile

Hai un pulsante il cui stile deve cambiare al passaggio del mouse. Il tuo compito è:

Usa la pseudoclasse :hover per cambiare il colore di sfondo del pulsante in verde quando l'utente ci passa sopra con il mouse.
Applica un'ombra al riquadro del pulsante durante l'effetto al passaggio del mouse, per farlo sembrare sollevato. Usa box-shadow in questo modo:

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

Aggiunge un'ombra con uno spostamento, una sfocatura e un colore.

Provalo tu

<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>