CSS Hover Effekt mit linearem Farbverlauf

In der Welt des Webdesigns gibt es unzählige Möglichkeiten, um Links auf einer Webseite hervorzuheben und ihnen eine besondere visuelle Präsenz zu verleihen. In diesem Artikel möchte ich dir einen interessanten CSS Trick vorstellen, der es ermöglicht, Links mit einem linearen Farbverlauf zu versehen und dabei eine elegante Animation bei Hover-Effekten zu erzielen.

Code:
Der folgende Code zeigt eine CSS-Stilregel, mit der dieser Effekt für Links erzielt werden kann:

a {
    position: relative;
    text-decoration: none;
    background-image: linear-gradient(currentColor, currentColor);
    background-position: 0% 100%;
    background-repeat: no-repeat;
    background-size: 0% 2px;
    transition: background-size 0.3s;
}

a:hover {
    background-size: 100% 2px;
}

Erläuterung: Dieser Code verwendet die CSS-Selektor-Syntax, um alle <a>-Elemente auf der Webseite anzusprechen. Die einzelnen Eigenschaften dienen dazu, den gewünschten Effekt zu erzielen:

  1. position: relative;: Diese Eigenschaft stellt sicher, dass das <a>-Element relativ zur normalen Flussrichtung der Webseite positioniert wird.
  2. text-decoration: none;: Damit wird die Standard-Textunterstreichung für Links deaktiviert, um Platz für den Farbverlauf zu schaffen.
  3. background-image: linear-gradient(currentColor, currentColor);: Hier wird ein linearer Farbverlauf definiert, der die Farbe des Textes als Start- und Endpunkt verwendet. Dadurch entsteht ein nahtloser Übergang zwischen dem Text und dem Hintergrund.
  4. background-position: 0% 100%;: Diese Eigenschaft legt die Ausgangsposition des Farbverlaufs fest. In diesem Fall beginnt der Verlauf am unteren Rand des Links.
  5. background-repeat: no-repeat;: Damit wird verhindert, dass der Farbverlauf wiederholt wird.
  6. background-size: 0% 2px;: Hier wird die Größe des Farbverlaufs festgelegt. Anfangs ist der Farbverlauf nur 0% (also unsichtbar) breit und 2px hoch.
  7. transition: background-size 0.3s;: Mit dieser Eigenschaft wird eine fließende Animation definiert. Wenn sich der Zustand des Links ändert, wird der Farbverlauf in 0,3 Sekunden auf die volle Breite animiert.
  8. &:hover: Diese Pseudo-Klasse wird aktiviert, wenn der Mauszeiger über den Link schwebt.
  9. background-size: 100% 2px;: Im Hover-Zustand wird die Breite des Farbverlaufs auf 100% gesetzt, wodurch der gesamte Link horizontal hervorgehoben wird.

Mit dem oben gezeigten CSS-Code kannst du Links auf einer Webseite mit einem eleganten linearen Farbverlauf hervorheben. Auf meiner Blog-Übersicht kannst du dir diesen Effekt anschauen.

Lake Studio