Effetto hover

Lezione 7 di 8 del corso Progetto CSS - Pulsante elegante di Coddy.

Creiamo qualche effetto quando il pulsante è al passaggio del mouse!

Per modificare il pulsante al passaggio del mouse usiamo la pseudo-classe :hover,

.fancyButton:hover {
	background-color: red;
}

Nell'esempio qui sopra, il nostro pulsante diventerà rosso al passaggio del mouse!

Per rendere fluida la transizione, usa

.fancyButton {
	...
	transition: all 0.2s;
}

Puoi provare a modificare la durata della transizione (0.2s).

Sfida

Facile

Aggiungi un effetto al passaggio del mouse sul tuo pulsante, rendilo bello!

Attività richieste:

Aggiungi una proprietà di transizione al tuo pulsante, con una durata a tua scelta, pari o inferiore a 1 secondo.
Aggiungi opacity: 0.8; all'effetto al passaggio del mouse sul tuo pulsante.

Proprietà facoltative e consigliate da modificare al passaggio del mouse:

ombre (box-shadow)
colore di sfondo

Provalo tu

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
    <body>
        <!-- Scrivi qui il codice HTML -->
    </body>
</html>

Tutte le lezioni di Progetto CSS - Pulsante elegante

1Introduzione

Introduzione Parte HTML

2Il progetto CSS

Effetto hover Lezione di progetto

Stile finale

Esercitati da solo: Playground Web