Anleitung, um einen Button beim Hover-Effekt verblassen zu lassen
In diesem Leitfaden erfahren Sie, wie Sie einen sanften Übergang zwischen zwei Farben erreichen können, wenn Sie mit dem Mauszeiger über einen Button fahren.
In unserem Button-Beispiel können wir den Hintergrund unseres Buttons ändern, indem wir eine andere Hintergrundfarbe für die dynamische Pseudo-Klasse :hover definieren. Wenn Sie jedoch über den Button fahren, wird die Hintergrundfarbe sofort auf die neue Farbe umschalten. Um einen sanfteren Übergang zwischen den beiden Farben zu erzeugen, können wir CSS-Transitions verwenden.
Verwendung von Transitions
Nachdem Sie die gewünschte Farbe für den Hover-Zustand hinzugefügt haben, fügen Sie die transition-Eigenschaft zu den Regeln für den Button hinzu. Für einen einfachen Übergang ist der Wert von transition der Name der Eigenschaft oder Eigenschaften, auf die dieser Übergang angewendet werden soll, sowie die Dauer, die der Übergang dauern soll.
Für die Pseudo-Klassen :active und :focus wird die transition-Eigenschaft auf none gesetzt, damit der Button beim Klicken sofort in den aktiven Zustand wechselt.
Im Beispiel dauert die Transition 1 Sekunde, Sie können versuchen, diese zu ändern, um den Unterschied zu sehen, den eine Änderung der Geschwindigkeit ausmacht.
<div class="wrapper">
<button class="fade">Hover over me</button>
</div>
.fade {
background-color: #db1f48;
color: white;
transition: background-color 1s;
}
.fade:hover {
background-color: #004369;
}
.fade:focus,
.fade:active {
background-color: black;
transition: none;
}
Hinweis:
Die transition-Eigenschaft ist eine Kurzform für transition-delay, transition-duration, transition-property und transition-timing-function. Sehen Sie sich die Seiten zu diesen Eigenschaften auf MDN an, um Möglichkeiten zu finden, Ihre Transitions anzupassen.