So lassen Sie einen Button beim Hover verblassen

In diesem Leitfaden erfahren Sie, wie Sie beim Überfahren eines Buttons einen sanften Übergang zwischen zwei Farben erreichen können.

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. Ein bloßes Überfahren des Buttons würde jedoch dazu führen, dass der Hintergrundfarbe sofort die neue Farbe zugewiesen wird. Um einen sanfteren Übergang zwischen den beiden Farben zu schaffen, können wir CSS-Übergänge verwenden.

Verwendung von Übergängen

Nachdem die gewünschte Farbe für den Hover-Zustand hinzugefügt wurde, 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(en), auf die dieser Übergang angewendet werden soll, sowie die Zeitspanne, die der Übergang dauern soll.

Für die :active und :focus Pseudo-Klassen wird die transition-Eigenschaft auf none gesetzt, sodass der Button sofort in den aktiven Zustand wechselt, wenn er geklickt wird.

Im Beispiel dauert der Übergang 1 Sekunde. Sie können versuchen, dies zu ändern, um den Unterschied einer Geschwindigkeitsänderung zu sehen.

html

<div class="wrapper">
  <button class="fade">Hover over me</button>
</div>

.wrapper {
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
}

button {
  padding: 5px 10px;
  border: 0;
  border-radius: 5px;
  font-weight: bold;
  font-size: 140%;
  cursor: pointer;
}

.fade:focus,
.fade:active {
  background-color: black;
}

css

.fade {
  background-color: #db1f48;
  color: #fff;
  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. Schauen Sie auf den Seiten dieser Eigenschaften auf MDN nach, um Möglichkeiten zu finden, Ihre Übergänge anzupassen.

Siehe auch

Verwendung von CSS-Übergängen