Hover-Effekte

Teil des Abschnitts CSS-Meisterschaft der HTML-Journey von Coddy. Lektion 8 von 43.

Die Pseudoklasse :hover ermöglicht es Ihnen, den Stil eines Elements zu ändern, wenn der Benutzer mit der Maus darüber fährt.

Hier ist ein einfaches Beispiel, das die Textfarbe ändert, wenn Sie mit der Maus über eine Schaltfläche fahren:

button {
  color: black;
}

button:hover {
  color: red;
}

In diesem Beispiel ist der Schaltflächentext standardmäßig schwarz, aber wenn Sie mit der Maus darüberfahren, wird der Text rot.

Aufgabe

Einfach

Du hast eine Schaltfläche, deren Stil beim Darüberfahren geändert werden soll. Deine Aufgabe ist es:

Verwende die Pseudoklasse :hover, um die Hintergrundfarbe der Schaltfläche grün zu ändern, wenn der Benutzer mit der Maus darüberfährt.
Wende während des Hover-Effekts einen Schlagschatten auf die Schaltfläche an, damit sie angehoben aussieht. Verwende box-shadow so:

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

Dadurch wird ein Schatten mit einem Versatz, einer Unschärfe und einer Farbe hinzugefügt.

Probier es selbst

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