6 kreative Ideen für CSS-Link-Hover-Effekte

Das Erstellen von CSS-Link-Hover-Effekten kann einer ansonsten langweiligen Webseite einen gewissen Pep verleihen. Wenn Sie sich jemals mit der Frage beschäftigt haben, wie Sie einen schicken Hover-Effekt erzielen können, dann habe ich sechs CSS-Effekte für Sie, die Sie für Ihr nächstes Projekt übernehmen können.

Fangen wir direkt an!

Ich weiß, wir sprechen über :hover und all das, aber es kann manchmal (aber vielleicht nicht immer) eine gute Idee sein, :focus mit einzubeziehen, da nicht alle Interaktionen direkt von einer Maus stammen, sondern vielleicht von einem Tippen oder einer Tastatureingabe.

Der gleitende Highlight-Link-Hover-Effekt

Dieser Effekt wendet einen Box-Schatten auf den Inline-Link an und verändert dabei die Farbe des Linktextes. Wir beginnen mit einem Padding rundherum und fügen dann einen negativen Margin desselben Wertes hinzu, um zu verhindern, dass das Padding den Textfluss stört.

Wir werden box-shadow anstelle der background-Eigenschaft verwenden, da sie uns Übergänge ermöglicht.

a {
  box-shadow: inset 0 0 0 0 #54b3d6;
  color: #54b3d6;
  margin: 0 -.25rem;
  padding: 0 .25rem;
  transition: color .3s ease-in-out, box-shadow .3s ease-in-out;
}
a:hover {
  box-shadow: inset 100px 0 0 0 #54b3d6;
  color: white;
}

Der Text-Austausch-Link-Hover-Effekt

Hier ist eine lustige Idee, bei der wir den Text des Links beim Hovern mit anderem Text austauschen. Fahren Sie mit der Maus über den Text und der Linktext gleitet heraus, während neuer Text hineingleitet.

Leichter zu zeigen als zu erklären.

Bei diesem Link-Hover-Effekt passiert eine ganze Menge Trickerei. Aber die magische Zutat ist die Verwendung eines Data-Attributs, um den Text zu definieren, der hineingleitet, und diesen mit der content-Eigenschaft des ::after-Pseudoelements des Links aufzurufen.

Zuerst das HTML-Markup

<p>Hover <a href="#" data-replace="get a link"><span>get a link</span></a></p>

Das ist eine Menge Inline-Markup, aber Sie sehen hier ein Absatz-Tag, das einen Link und einen Span enthält.

Geben wir dem Link einige Basisstile. Wir müssen ihm eine relative Positionierung geben, um die Pseudoelemente – die absolut positioniert werden – an Ort und Stelle zu halten, sicherstellen, dass er als inline-block angezeigt wird, um Styling-Möglichkeiten für Box-Elemente zu erhalten, und jeglichen Überlauf verstecken, den die Pseudoelemente verursachen könnten.

a {
  overflow: hidden;
  position: relative;
  display: inline-block;
}

Die ::before und ::after Pseudoelemente sollten eine absolute Positionierung haben, damit sie mit dem eigentlichen Link gestapelt werden. Wir stellen sicher, dass sie die volle Breite des Links haben und mit einem Null-Offset in der linken Position, um sie für eine gleitende Aktion vorzubereiten.

a::before,
a::after {
 content: '';
  position: absolute;
  width: 100%;
  left: 0;
}

Das ::after Pseudoelement erhält den Inhalt aus dem Data-Attribut des Links, das sich im HTML-Markup befindet

a::after {
  content: attr(data-replace);
}

Nun können wir das ::after Pseudoelement mit transform: translate3d() um 200% nach rechts verschieben. Wir bewegen es beim :hover zurück in seine Position. Während wir dabei sind, können wir diesem einen Null-Offset in Richtung top geben. Das wird später wichtig sein, wenn wir das ::before Pseudoelement wie eine Unterstreichung unter dem Text verwenden.

a::after {
  content: attr(data-replace);
  top: 0;
  transform-origin: 100% 50%;
  transform: translate3d(200%, 0, 0);
}

a:hover::after,
a:focus::after {
  transform: translate3d(0, 0, 0);
}

Wir werden auch das ::before Pseudoelement mit transform: scale() skalieren, damit es standardmäßig versteckt ist, und es dann beim :hover wieder hochskalieren. Wir machen es klein, mit einer Höhe von z. B. 2px, und verankern es unten, damit es wie eine Unterstreichung des Textes aussieht, der mit ::after ausgetauscht wird.

a::before {
  background-color: #54b3d6;
  height: 2px;
  bottom: 0;
  transform-origin: 100% 50%;
  transform: scaleX(0);
}

a:hover::before,
a:focus::before {
  transform-origin: 0% 50%;
  transform: scaleX(1);
}

Der Rest ist alles Geschmackssache! Wir fügen einen transition zu den transform-Effekten hinzu, einige Farben und dergleichen, um den vollen Effekt zu erzielen. Diese Werte liegen ganz bei Ihnen.

a {
  overflow: hidden;
  position: relative;
  display: inline-block;
}

a::before,
a::after {
 content: '';
  position: absolute;
  width: 100%;
  left: 0;
}
a::before {
  background-color: #54b3d6;
  height: 2px;
  bottom: 0;
  transform-origin: 100% 50%;
  transform: scaleX(0);
  transition: transform .3s cubic-bezier(0.76, 0, 0.24, 1);
}
a::after {
  content: attr(data-replace);
  height: 100%;
  top: 0;
  transform-origin: 100% 50%;
  transform: translate3d(200%, 0, 0);
  transition: transform .3s cubic-bezier(0.76, 0, 0.24, 1);
  color: #54b3d6;
}

a:hover::before {
  transform-origin: 0% 50%;
  transform: scaleX(1);
}
a:hover::after {
  transform: translate3d(0, 0, 0);
}

a span {
  display: inline-block;
  transition: transform .3s cubic-bezier(0.76, 0, 0.24, 1);
}

a:hover span {
  transform: translate3d(-200%, 0, 0);
}

Der wachsende Hintergrund-Link-Hover-Effekt

Dies ist ein ziemlich beliebter Effekt, den ich schon an vielen Stellen gesehen habe. Die Idee ist, dass Sie das ::before-Pseudoelement des Links als dicke Unterstreichung verwenden, die leicht hinter dem eigentlichen Linktext liegt. Dann, beim Hovern, dehnt sich das Pseudoelement aus, um alles zu bedecken.

Okay, einige Basisstile für den Link. Wir wollen keine text-decoration, da ::before wie eine solche fungiert, dann eine relative Positionierung, um ::before bei absoluter Positionierung an Ort und Stelle zu halten.

a {
  text-decoration: none;
  position: relative;
}

Jetzt richten wir ::before ein, indem wir es z. B. 8px hoch machen, damit es wie eine dicke Unterstreichung aussieht. Wir geben ihm auch eine absolute Positionierung, damit wir es über die volle Breite des eigentlichen Links steuern können, während wir es so versetzen, dass es links und nur ein kleines Stück vom unteren Rand entfernt ist, damit es so aussieht, als würde es den Link subtil hervorheben. Geben wir ihm auch z-index: -1, damit wir sicher sind, dass es hinter dem Link liegt.

a::before {
  content: '';
  background-color: hsla(196, 61%, 58%, .75);
  position: absolute;
  left: 0;
  bottom: 3px;
  width: 100%;
  height: 8px;
  z-index: -1;
}

Schön, schön. Lassen Sie es so aussehen, als würde ::before wachsen, wenn der Link gehovert wird. Alles, was wir tun müssen, ist die Höhe von 3px auf 100% zu ändern. Beachten Sie, dass ich auch den bottom-Offset auf Null zurückstelle, damit der Hintergrund beim Wachsen mehr Platz einnimmt.

a:hover::before {
  bottom: 0;
  height: 100%;
}

Nun für einen leichten Übergang bei diesen Änderungen

a::before {
  content: '';
  background-color: hsla(196, 61%, 58%, .75);
  position: absolute;
  left: 0;
  bottom: 3px;
  width: 100%;
  height: 8px;
  z-index: -1;
  transition: all .3s ease-in-out;
}

a {
  text-decoration: none;
  color: #18272F;
  font-weight: 700;
  position: relative;
}

a::before {
  content: '';
  background-color: hsla(196, 61%, 58%, .75);
  position: absolute;
  left: 0;
  bottom: 3px;
  width: 100%;
  height: 8px;
  z-index: -1;
  transition: all .3s ease-in-out;
}

a:hover::before {
  bottom: 0;
  height: 100%;
}

Der Rechts-nach-Links-Farbwechsel-Link-Hover-Effekt

Ich persönlich verwende diesen Effekt gerne für Links in einer Navigation. Der Link beginnt in einer Farbe ohne Unterstreichung. Dann gleitet beim Hovern eine neue Farbe von rechts herein, während eine Unterstreichung von links herein gleitet.

Schick, oder? Da ist viel Bewegung drin, daher sollten Sie die Barrierefreiheitsaspekte berücksichtigen und alles in eine prefers-reduced-motion-Abfrage packen, um es für Menschen mit Bewegungsempfindlichkeiten durch etwas Dezenteres zu ersetzen.

So funktioniert es. Wir geben dem Link einen linearen Hintergrundverlauf mit einem harten Stopp zwischen zwei Farben in der Mitte.

a {
  background-image: linear-gradient(
    to right,
    #54b3d6,
    #54b3d6 50%,
    #000 50%
  );
}

Wir machen den Hintergrund doppelt so breit wie der Link, also 200%, und positionieren ihn ganz links. So ist es, als ob nur eine der beiden Farben des Farbverlaufs sichtbar wäre.

a {
  background-image: linear-gradient(
    to right,
    #54b3d6,
    #54b3d6 50%,
    #000 50%
  );
  background-size: 200% 100%;
  background-position: -100%;
}

Die Magie geschieht, wenn wir ein paar nicht standardmäßige -webkit--präfixierte Eigenschaften verwenden. Eine entfernt die Farbe aus dem Text, um ihn transparent zu machen. Die andere schneidet den Hintergrundverlauf auf den Text zu, sodass es so aussieht, als wäre der Text tatsächlich die Farbe des Hintergrunds.

a {
  background-image: linear-gradient(
    to right,
    #54b3d6,
    #54b3d6 50%,
    #000 50%
  );
  background-size: 200% 100%;
  background-position: -100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

Immer noch dabei? Jetzt erstellen wir die gefälschte Unterstreichung des Links, indem wir ::before verwenden. Wir geben ihm die gleiche Farbe wie dem versteckten Teil des Hintergrundverlaufs des Links und positionieren ihn unter dem eigentlichen Link, damit er wie eine richtige text-decoration: underline aussieht.

a:before {
  content: '';
  background: #54b3d6;
  display: block;
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 0;
  height: 3px;
}

Beim Hovern schieben wir ::before von links heran

a:hover {
 background-position: 0;
}

Nun, das ist ein wenig knifflig. Beim Hovern machen wir das ::before-Pseudoelement des Links zu 100% der Breite des Links. Wenn wir dies direkt auf den Hover-Zustand des Links anwenden würden, würden wir den Link selbst auf voller Breite machen, was ihn über den Bildschirm bewegt. Autsch!

a:hover::before {
  width: 100%;
}

Fügen Sie einen kleinen Übergang hinzu, um die Dinge zu glätten

a {
  background-image: linear-gradient(
    to right,
    #54b3d6,
    #54b3d6 50%,
    #000 50%
  );
  background-size: 200% 100%;
  background-position: -100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: all 0.3s ease-in-out;
}

a {
  background-image: linear-gradient(
    to right,
    #54b3d6,
    #54b3d6 50%,
    #000 50%
  );
  background-size: 200% 100%;
  background-position: -100%;
  display: inline-block;
  padding: 5px 0;
  position: relative;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: all 0.3s ease-in-out;
}

a:before {
  content: '';
  background: #54b3d6;
  display: block;
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 0;
  height: 3px;
  transition: all 0.3s ease-in-out;
}

a:hover {
 background-position: 0;
}

a:hover::before {
  width:100%;
}

Der Regenbogen-Unterstrich-Link-Hover-Effekt

Wir können nicht text-decoration-color: rainbow machen, aber wir können es mit ein wenig background-Magie, gemischt mit linearen Farbverläufen, vortäuschen.

Zuerst entfernen wir die text-decoration des Links

a {
  text-decoration: none;
}

Nun zu diesen Farbverläufen. Wir verketten zwei lineare Farbverläufe auf derselben background-Eigenschaft. Ein Farbverlauf ist die anfängliche Farbe vor dem Hovern. Der zweite ist der Regenbogen beim Hovern.

a {
  background:
    linear-gradient(
      to right,
      rgba(100, 200, 200, 1),
      rgba(100, 200, 200, 1)
    ),
    linear-gradient(
      to right,
      rgba(255, 0, 0, 1),
      rgba(255, 0, 180, 1),
      rgba(0, 100, 200, 1)
  );
}

Wir machen die Hintergrundgröße nur 3px hoch, damit es wie eine Unterstreichung aussieht. Wir können beide Farbverläufe zusammen auf der background-size-Eigenschaft dimensionieren, so dass der anfängliche Farbverlauf volle Breite und 3px Höhe hat und der Regenbogen keine Breite hat.

a {
  background:
    linear-gradient(
      to right,
      rgba(100, 200, 200, 1),
      rgba(100, 200, 200, 1)
    ),
    linear-gradient(
      to right,
      rgba(255, 0, 0, 1),
      rgba(255, 0, 180, 1),
      rgba(0, 100, 200, 1)
  );
  background-size: 100% 3px, 0 3px;
}

Nun können wir die Hintergrundverläufe positionieren – gleichzeitig auf der background-position-Eigenschaft – so dass der erste Farbverlauf vollständig sichtbar ist und der Regenbogen aus der Ansicht verschoben wird. Ach ja, und stellen wir sicher, dass der Hintergrund nicht wiederholt wird, während wir dabei sind.

a {
  background:
    linear-gradient(
      to right,
      rgba(100, 200, 200, 1),
      rgba(100, 200, 200, 1)
    ),
    linear-gradient(
      to right,
      rgba(255, 0, 0, 1),
      rgba(255, 0, 180, 1),
      rgba(0, 100, 200, 1)
  );
  background-size: 100% 3px, 0 3px;
  background-position: 100% 100%, 0 100%;
  background-repeat: no-repeat;
}

Wir aktualisieren die background-size beim Hovern, damit die Farbverläufe die Werte tauschen

a:hover {
  background-size: 0 3px, 100% 3px;
}

Und schließlich ein kleiner Übergang, wenn der Hover-Effekt eintritt

a {
  background:
    linear-gradient(
      to right,
      rgba(100, 200, 200, 1),
      rgba(100, 200, 200, 1)
    ),
    linear-gradient(
      to right,
      rgba(255, 0, 0, 1),
      rgba(255, 0, 180, 1),
      rgba(0, 100, 200, 1)
  );
  background-size: 100% 3px, 0 3px;
  background-position: 100% 100%, 0 100%;
  background-repeat: no-repeat;
  transition: background-size 400ms;
}

Voilà!

Der durchlaufende Unterstrich-Link-Hover-Effekt

Geoff Graham hat kürzlich dasselbe behandelt, als er Adam Argyle's schicken Hover-Effekt analysierte. In seiner Demo fährt eine Hintergrundfarbe von links hinter den Link und verschwindet dann nach rechts beim Mouse-Out.

Meine Version reduziert den Hintergrund, sodass er eher wie eine Unterstreichung wirkt.

a {
  position: relative;
}

a::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 4px;
    border-radius: 4px;
    background-color: #18272F;
    bottom: 0;
    left: 0;
    transform-origin: right;
    transform: scaleX(0);
    transition: transform .3s ease-in-out;
  }

a:hover::before {
  transform-origin: left;
  transform: scaleX(1);
}

Das ist nicht der einzige Weg, dies zu erreichen! Hier ist eine weitere von Justin Wong, die stattdessen background verwendet.

Geoff hat auch eine Zusammenfassung von CSS-Link-Hover-Effekten, von schick bis geradezu absurd. Es lohnt sich, das anzuschauen! Für etwas sehr Praktisches zum Stylen von Links und Buttons, schauen Sie sich Philip Zastrows Anfänger-Tutorial bei DigitalOcean an.

Viel Spaß beim Verlinken!

Es gibt viele Optionen, wenn es darum geht, Ihren eigenen Hover-Effekt für Inline-Links mit CSS zu erstellen. Sie können sogar mit diesen Effekten spielen und etwas Neues schaffen. Ich hoffe, der Artikel hat Ihnen gefallen. Experimentieren Sie weiter!