Hover-Effekt

Lektion 7 von 8 im Kurs CSS-Projekt – Schicker Button von Coddy.

Lass uns einen Effekt erstellen, wenn der Button mit der Maus berührt wird!

Um den Button beim Hovern zu ändern, verwenden wir die Pseudoklasse :hover,

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

Im obigen Beispiel wird unser Button rot, sobald man mit der Maus darüberfährt!

Um den Übergang flüssig zu gestalten, verwende:

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

Du kannst mit der Übergangszeit (0.2s) experimentieren.

Aufgabe

Einfach

Füge deinem Button einen Hover-Effekt hinzu, mach ihn hübsch!

Erforderliche Aufgaben:

Füge deinem Button die transition-Eigenschaft hinzu, mit einer Zeitspanne deiner Wahl, kleiner oder gleich 1 Sekunde.
Füge opacity: 0.8; zu deinem Hover-Effekt des Buttons hinzu.

Optionale und empfohlene Eigenschaften, die beim Hovern geändert werden können:

Schatten (box-shadow)
Hintergrundfarbe

Probier es selbst

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
    <body>
        <!-- Write HTML code here -->
    </body>
</html>

Alle Lektionen in CSS-Projekt – Schicker Button

1Einführung

2Das CSS-Projekt

Hover-Effekt Projekt-Lektion

Finales Styling