Hyperlinks mit linearem Farbverlauf

Du suchst nach weiteren, individuellen Gestaltungsmöglichkeiten für deine Website? Dabei kannst du bspw. Hyperlinks mit linearem Farbverlauf erstellen. Einen solchen Effekt sieht man nicht häufig und könnte – je nach Design deiner Website – für einen netten Zusatzeffekt sorgen.

In diesem Artikel zeige ich dir dabei, wie du deine Hyperlinks mit einem linearen Farbverlauf hinterlegen kannst.

 

Hyperlinks mit linearem Farbverlauf erstellen

Alles, was du hierzu benötigst, sind ein paar Einträge in deiner CSS Datei. Du kannst dabei den Effekt natürlich auch bei normalen Unterstreichungen verwenden.

Das ist dabei immer dann sinnvoll, um einen Link von einem Unterstrich im Text zu unterscheiden. Insbesondere auf Mobilgeräten kann man nicht einfach mit dem Mauszeiger über einen vermeintlichen Link fahren. So kann der Nutzer nicht sehen, ob es tatsächlich ein Link ist.

Um mit CSS deine Links mit einem linearen Farbverlauf zu versehen, füge einfach das nachstehende CSS Snippet in deine CSS Datei ein.

 

Beispiel (CSS):

  a {
  position: relative;
  padding-bottom: 2px;
  text-decoration: none;
}

a:hover::after {
  content: "";
  position: absolute;
  bottom: 2px;
  left: 0;
  height: 1px;
  width: 100%;
  background: #444;
  background: -webkit-linear-gradient(left, transparent 0%,#444 50%,transparent 100%);
  background: -moz-linear-gradient(left, transparent 0%,#444 50%,transparent 100%);
  background: -o-linear-gradient(left, transparent 0%,#444 50%,transparent 100%);
  background: linear-gradient(left, transparent 0%,#444 50%,transparent 100%);
 }

 

Erklärung:

Mit diesem CSS Snippet kannst du dabei die Links auf deiner Website mit einem linearen Farbverlauf unterlegen. Die Farbe, sowie die weiteren Einstellungen, sind dabei natürlich frei wählbar. Spiele dazu einfach ein wenig mit den Einstellungen herum. So kannst du dann schnell die richtigen Einstellungen für deine Website finden.

 

Live Beispiel:

Natürlich kannst du dir dazu auch ein Live Beispiel ansehen.

Folge hierzu einfach dem folgenden Link: Links mit linearem Farbverlauf anzeigen.

 

Alternativen

Um eine Unterscheidung zwischen Hyperlink und Unterstreichung herzustellen, gibt es auch Alternativen. Du könntest bspw. automatisch eine Grafik an externe Links anfügen. So visualisierst du einen Link mit einem Bild.

Ebenso könntest du auch nur bestimmte Links kenntlich machen – bspw. einen E-Mail Link, oder Download-Links. Auch ein Hover-Effekt wäre denkbar, den es übrigens auch für Bilder gibt.

 

Browser-Test

Das oben genannte CSS Snippet habe ich überdies in folgenden Browsern getestet.

  • Mozilla Firefox 56.0 (inkl. Firefox 56 mobile – Android)
  • Google Chrome 62 (inkl. Chrome 62 mobile – Android)
  • Microsoft Edge

In den genannten Browsern funktioniert das Snippet dabei einwandfrei. Ich kann jedoch leider nicht versichern, dass dieses CSS Snippet auch in hier nicht aufgeführten Browsern funktioniert.


Dir gefällt dieser Artikel?

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.