Effets de survol

Fait partie de la section Maîtrise du CSS du Journey HTML de Coddy. Leçon 8 sur 43.

La pseudo-classe :hover vous permet de modifier le style d'un élément lorsque l'utilisateur le survole avec sa souris.

Voici un exemple simple qui change la couleur du texte lorsque vous survolez un bouton :

button {
  color: black;
}

button:hover {
  color: red;
}

Dans cet exemple, le texte du bouton est noir par défaut, mais lorsque vous le survolez, le texte devient rouge.

Défi

Facile

Vous avez un bouton dont le style doit changer lorsqu’il est survolé. Votre tâche consiste à :

Utiliser la pseudo-classe :hover pour changer la couleur d’arrière-plan du bouton en vert lorsque l’utilisateur le survole.
Appliquer une ombre portée au bouton pendant l’effet de survol afin de lui donner l’apparence d’être soulevé. Utilisez box-shadow comme ceci :

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

Elle ajoute une ombre avec un décalage, un flou et une couleur.

Essayez vous-même

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