So kannst du Links schick gestalten

Ohne Verlinkungen wäre das Internet schlicht nicht denkbar: ob es nun um die einzelnen Unterseiten einer Webseite geht oder um das Vernetzen von verschiedenen Webseiten – Links sind einfach der Kitt des Internets.
Auch dein Blog steckt voller Links: du verlinkst verschiedene Kategorien, unterschiedliche Seiten, setzt Verlinkungen auf andere Blogs, und und und.

Dabei sollten die Links natürlich gut aussehen! Denn an den standardmäßig blau gefärbten Links, die nach dem Anklicken lila werden, haben wir uns alle längst satt gesehen. Das geht schicker!

In diesem Tutorial erfährst du, wie du Links in HTML notierst und wie du sie dann mit CSS auf die unterschiedlichsten Weisen stylen kannst. 🙂

Sag mal „aaaa“: so sieht der HTML-Code für Links aus

So schaut die HTML-Konstruktion für eine Verlinkung aus:

<a href="https://linkziel.de" title="Linkziel | ein toller Blog">Linktext</a>

• a steht dabei für anchor (Anker).
• Das Attribut href gibt an, wo die Reise hingehen soll.
• Der title ist das, was angezeigt wird, wenn man mit dem Mauszeiger über einen Link fährt. Sinnvollerweise sollte der title nicht einfach dem Linktext entsprechen, sondern eine kurze Info beinhalten.

Warum du (meistens) kein „target“-Attribut verwenden solltest

Neben href und title gibt es noch ein paar andere Attribute, die du einem Link mitgeben kannst. Eines der bekanntesten möchte ich hier kurz erwähnen, weil du es tunlichst nicht benutzen solltest. 😉

Die Rede ist vom „target“-Attribut: über target kannst du steuern, ob sich der Link im gleichen Browserfenster öffnen soll (target="_self") oder in einem neuen (target="_blank").
Beides hat seine Vor- und Nachteile, allerdings solltest du bedenken: wenn du kein target definierst, können deine Leser selber entscheiden, ob sie den Link im gleichen Tab öffnen möchten oder nicht. Mit target="_blank" entmündigst du sie und zwingst ihnen ein neues Browserfenster auf. Das kann in Sachen Benutzerfreundlichkeit als störend aufgefasst werden. Du solltest dir also sehr genau überlegen, ob und wo du dieses Verhalten erzwingen möchtest.

Mit dem Duo href und title bist du auf jeden Fall gut beraten.

Das berühmte nofollow-Attribut

Vermutlich ist über kein Attribut so hitzig debattiert worden wie über nofollow.
Was es damit auf sich hat? – Das würde an dieser Stelle zu weit führen würde, sodass ich hier einfach mal auf meinen Artikel dofollow oder nofollow? verweise.

Jetzt wird’s bunt – wie du deine Links gestalten kannst

So, jetzt geht’s ans Aussehen und somit ins CSS. 🙂

Du kannst deine Verlinkungen auf verschiedene Arten gestalten: durch eine andere Schriftfarbe, durch eine Unterstreichung oder auch eine Hintergrundfarbe, die deinen schnöden Textlink in einen Button verwandelt, durch das Hinzufügen von Icons, und und und…

Was du dabei beachten solltest

Wichtig ist eines: für deine Leser muss immer klar sein, was ein Link ist und was nicht. Der schönste Link nutzt dir nichts, wenn ihn niemand als solchen erkennt und demzufolge keiner draufklickt.
In Sachen Usability, zu deutsch Benutzerfreundlichkeit, empfiehlt sich Folgendes:

• Mittlerweile hat man sich daran gewöhnt, dass unterstrichene Wörter üblicherweise eine Verlinkung darstellen. Damit machst du also schon mal nichts falsch.
• Hilfreich ist außerdem eine farbliche Unterscheidung – in einem schwarzen Fließtext fällt ein grünes Wort einfach auf und legt nahe, dass es sich um einen Link handelt.
• Der Dritte im Bunde ist die Animation, sprich: wenn du mit dem Mauszeiger über ein verlinktes Wort fährst, sollte es sich irgendwie verändern und somit erkennen lassen, dass hier ein interaktives Element vorliegt. Der Klassiker wäre zum Beispiel, wenn die Schriftfarbe wechselt und die Unterstreichung verschwindet.

Das heißt nicht, dass du all diese Punkte berücksichtigen musst.
Du musst deine Links also nicht zwangsläufig unterstreichen, aber du solltest eben darauf achten, dass sie sich vom restlichen Text unterscheiden. Ein buntes, nicht-unterstrichenes Wort kann in einem Fließtext ebenso auffallen wie ein Link, der zwar ebenfalls schwarz ist, aber eine Unterstreichung aufweist.

Die Linkfarbe

Standardmäßig stellen die Browser Links blau dar, besuchte Links lila. Da diese Farben in den allerwenigsten Fällen zum Layout passen, greifen wir hier mal zum Farbtopf.

a {
     color: #C02942;
}

a:hover {
     color: #D95B43;
}

Das sieht dann so aus:

Über color legst du die Schriftfarbe fest.

Wie du siehst, kannst du gezielt verschiedene Zustände eines Links stylen:

• :hover kennzeichnet den Moment, in dem du dich mit dem Mauszeiger über dem Link befindest
• :visited sind bereits angeklickte Links

:hover kannst du übrigens auch auf andere HTML-Elemente anwenden, nicht nur auf Links. 🙂
Das gilt auch für zwei weitere Zustände:

• :active greift genau in dem Moment, in dem du auf den Link klickst und die Maustaste noch nicht losgelassen hast – das ist zum Beispiel auch bei Input-Feldern in Formularen sinnvoll
• :focus stylt Elemente, die gerade ausgewählt sind – wenn du dich zum Beispiel mit den Tab-Tasten durch ein Formular bewegst und dabei jeweils ein Feld ausgewählt ist.

So, zurück zu den Verlinkungen. 🙂

Unterstreichungen

Üblicherweise sind Links unterstrichen. Das muss aber natürlich nicht unbedingt so bleiben. Solange die Links eindeutig als solche zu erkennen sind, sich also vom Fließtext abheben, kannst du statt Unterstreichungen beispielsweise auch nur auf einen anderen Farbton setzen. Oder du unterstreichst Links erst dann, wenn man mit dem Mauszeiger darüber fährt.

Mit text-decoration: none; blendest die Unterstreichung aus, mit text-decoration: underline; fügst du sie hinzu.

a {
     color: #C02942;
     text-decoration: none;
}

a:hover {
     color: #D95B43;
     text-decoration: underline;
}

Bei text-decoration hat die Unterstreichung immer die gleiche Farbe wie der Link. Um dafür aber eine andere Farbe verwenden zu können, greifen wir in die Trickkiste. 🙂
Und zwar sagen wir dem Link nicht, dass er unterstrichen sein soll, sondern verpassen ihm auf der Unterseite eine Linie. Für die border kann man nämlich sehr wohl eigene Farben setzen. 🙂

a, a:hover {
     text-decoration: none;
}

a {
     border-bottom: 2px solid #f1820a;
     color: #C02942;
}

a:hover {
     border-color: #C02942;
     color: #D95B43;
}

Zuerst entfernen wir die Unterstreichung sowohl von den normalen Links, als auch von den gerade gehoverten. Dieser Reset ist wichtig, um die Standard-Eigenschaften zu überschreiben.
Dann bekommt der Link seine Linie, die 2px dick und durchgezogen ist.

Da die Linie auch beim Hovern noch 2px dick und durchgängig sein soll, reicht es, hierfür nur die border-color neu zu setzen. Stattdessen könntest du aber natürlich auch die längere Version notieren – border-bottom: 2px solid #C02942;.

So sieht’s aus:

Hintergrund

Warum nicht mal etwas anderes probieren und Links mit einer Hintergrundfarbe versehen? 🙂

Einmal der Code für das linke Beispiel – was aussieht wie mit einem Textmarker hervorgehoben:

a {
     background: #f9f8b3;
     color: #242424;
     padding: 0 3px;
     text-decoration: none;
}

Das padding sorgt für etwas Innenabstand auf der linken und rechten Seite, damit die Farbe nicht direkt neben den Buchstaben abgeschnitten wird.

Mit ein bisschen mehr padding wird so auch schnell ein schicker Button daraus… das hier ist der rechte Link:

a {
     text-decoration: none;
     background: #096084;
     color: #fff;
     padding: 5px 20px;
     border-radius: 10px;
     text-transform: uppercase;
}

Hier habe ich noch abgerundete Ecken hinzugefügt und die Schrift in Großbuchstaben verwandelt.

Ich hoffe, ich konnte dir mit diesem Tutorial weiterhelfen und die ein oder andere Inspiration für das Aussehen deiner Links geben! 🙂