Effet de survol
Leçon 7 sur 8 du cours Projet CSS - Bouton stylisé de Coddy.
Créons un effet lorsque le bouton est survolé !
Pour modifier le bouton lors du survol, nous utilisons la pseudo-classe :hover,
.fancyButton:hover {
background-color: red;
}Dans l'exemple ci-dessus, notre bouton deviendra rouge une fois survolé !
Pour rendre la transition fluide, utilisez :
.fancyButton {
...
transition: all 0.2s;
}Vous pouvez jouer avec le temps de transition (0.2s).
Défi
FacileAjoutez un effet de survol à votre bouton, rendez-le joli !
Tâches requises :
- Ajoutez la propriété transition à votre bouton, avec la durée de votre choix, inférieure ou égale à 1 seconde.
- Ajoutez
opacity: 0.8;à l'effet de survol de votre bouton.
Propriétés optionnelles et suggérées à modifier lors du survol :
- ombres (
box-shadow) - couleur d'arrière-plan
Essayez vous-même
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Write HTML code here -->
</body>
</html>