Cooler CSS Hover-Effekt für Textlinks mit Animation

Im Internet findet man sehr viele Beispiele für coole Hover-Effekte für Links. Hier ist ein weiterer.

This is my fancy text link

So funktioniert es:

Zuerst definieren wir einen HTML-Link mit der CSS-Klasse .fancy-button

<a href="https://example.com" class="fancy-link">This is my fancy text link</a>

Per CSS definieren wir ein background-image mit einem Farbverlauf (gradient). Der Verlauf hat eine Höhe von 1px und erscheint dadurch wie ein Unterstrich des Linktextes. Mit background-position: 50%; wird der Fix-Punkt Animation in die Mitte gesetzt. Das entspricht der Mitte des Linktextes. Mit CSS-Animation wird die Breite der background-size animiert. Dadurch entsteht der Effekt dass der Unterstrich bei Mouseover variiert. HTML-Links sind standardmäßig Inline-Elemente und dadurch funktioniert die Animatio auch bei Zeilenumbrüchen.

.fancy-link {
  color: #4a4a4a;
  transition: all .2s;
  background-repeat: no-repeat;
  background-position: 50%;
  background-size: 100% 100%;
  background-image: linear-gradient(transparent, calc(100% - 1px), #00a175 1px);
  text-decoration: none;
}
.fancy-link:hover {
  text-decoration: none;
  animation: AnimTextLinkHover 500ms linear infinite
}

@keyframes AnimTextLinkHover {
  0% {
    background-size: 100% 100%;
  }
  50% {
    background-size: 90% 100%;
  }
  100% {
    background-size: 100% 100%;
  }
}

Beispiel innerhalb eines Fließtextes:

Im Park sitzen zwei Wurstköppe auf der Bank und schwelgen in alten Erinnerungen. Sie erzählen sich von den guten alten Zeiten als man noch in der vollen S-Bahn Knoblauchwurst essen konnte, ohne sofort angemacht zu werden. Eine Zeit in der man Frauen noch zu einem Date beim Currywurst-Stand einladen konnte. Und vor allem an eine Zeit in der jeder Schüler einmal davon träumte an der Wursttheke zu stehen und sich alle Wurstsorten auf einmal aussuchen zu können. Es sind alte Wurstgeschichten längst vergangener Tage.

Hans isst gerne Würstchen. Auf dem Schulweg läuft er jeden Morgen beim Wursthändler vorbei und blickt durch die Fensterscheibe auf die Wursttheke. Dort gibt es unzählige Wurstspezialitäten. Viele davon kennt Hans gar nicht. Deshalb geht er immer ihn den Wurstladen hinein und hört zu was die Leute sagen. “100 Gramm Salamiwurst bitte”, "8 Scheiben Jagdwurst, bitte”, oder “Eine Wurstschnecke bitte”. Hans ist ganz erstaunt. Von einer Wurstschnecke hat er noch nie gehört. So eine hätte er auch gerne. Aber er hat kein Geld. Er ist erst 8 Jahre alt. In der Schule erzählt er seinen Freunden von dem Wurstladen und dass er einmal Wurstmacher werden möchte wenn er groß ist. Seine Freunde nennen ihn daher mittlerweile Hanswurst.