Anleitung, um einen Button beim Hover zu verblassen
In diesem Leitfaden erfahren Sie, wie Sie einen sanften Übergang zwischen zwei Farben erreichen können, wenn Sie ü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 schlagartig zur neuen Farbe wechseln. Um einen sanfteren Übergang zwischen den beiden zu schaffen, können wir CSS-Übergänge verwenden.
Verwendung von Übergängen
Nachdem Sie die gewünschte Farbe für den Hover-Zustand hinzugefügt haben, fügen Sie die Eigenschaft transition 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 Zeit, die der Übergang dauern soll.
Für die Pseudo-Klassen :active und :focus wird die Eigenschaft transition auf none gesetzt, damit der Button beim Klicken direkt in den aktiven Zustand springt.
Im Beispiel dauert der Übergang 1 Sekunde, Sie können versuchen, dies zu ändern, um den Unterschied zu sehen, den eine Änderung der Geschwindigkeit bewirkt.
<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 Eigenschaft transition ist eine Kurzform für transition-delay, transition-duration, transition-property, und transition-timing-function. Besuchen Sie die Seiten für diese Eigenschaften auf MDN, um Möglichkeiten zu finden, Ihre Übergänge anzupassen.
