CSS-Tutorial: Links gestalten

So kannst du Links schick gestalten

- zuletzt aktualisiert am 12. Januar 2019

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. 🙂

So stylst du die Links in deinem #Blog: Klick um zu Tweeten

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.

Was es beim Gestalten von Links in Sachen #Usability zu beachten gilt: Klick um zu Tweeten

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:

CSS-Tutorial: Links stylen

Über color legst du die Schriftfarbe fest.

Lesetipp: So wird’s bunt – Farben in CSS

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:

CSS-Tutorial: Links stylen

Hintergrund

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

CSS-Tutorial: Links stylen

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.

Fazit
Verlinkungen sind enorm wichtig – und mit einigen einfachen CSS-Anweisungen kannst du sie schick aussehen lassen. Beispielsweise kannst du ihre Schriftfarbe variieren, Unterstreichungen hinzufügen oder sie wie einen Button aussehen lassen.
Hab dabei immer die Usability im Blick, damit deine Leser die Links noch als solche erkennen.

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

Hat dir dieser Beitrag gefallen? Dann nimm ihn doch mit auf Pinterest und speichere ihn, damit du ihn später wiederfindest und auch andere Leute ihn entdecken! 🙂

    Kommentare

  1. Penny Lane (Moni) am 12. August 2013 um 20:42:

    Hallo,

    danke für dieses sehr nützliches Tutorial,(bzw. die ganze Reihe) weil ich gerade dabei bin, meinen Blog etwas aufzuhübschen und genau solche Anleitungen gut brauchen kann:) Nur eine Frage hätte ich: Wo schreibe ich das CSS hin, in das Feld im Bloggermenü (Erweitert usw. ) oder einfach vorne in den CSS- Kopf meiner Template? Oder geht beides? Ich verwende blogger…ich habe auch schon einiges bei mir geändert, aber im Nachhinein denke ich mir oft: Wie hab ich das nochmal gemacht?^^ Und bei CSS hatte ich bislang noch nicht wirklich den Durchblick.

    Dein aktuelles Design ist ja mal wieder sehr schick!
    Liebe Grüße
    Moni (Penny Lane)

    • Anne am 17. August 2013 um 9:01:

      Hej, um das CSS einzufügen, gibt es einen eigenen Bereich bei Blogspot:
      geh auf Vorlage –> Anpassen –> Erweitert und dann scroll ganz herunter bis zu „CSS hinzufügen“. 🙂

  2. Ola am 5. Juni 2015 um 14:49:

    Hallihallo
    Ansich gut erklärt. Wenn ich aber deinen ersten CSS für den Hintergrund in meinem Vorlagedisigner als CSS eingebe, dann werden sämtliche Links auf meinem Blog inkl. irgendwelche senkrechten Striche gelb markiert. Ich würde aber gern nur 2-3 links markieren (bzw den Hintergrund von diesen einfärben). Was mache ich falsch? Liebe Grüsse

    • Anne am 6. Juni 2015 um 7:06:

      Hallo Ola,

      die CSS-Anweisungen aus dem Stylesheet (also dem, was im Vorlagendesigner angelegt wird), gelten tatsächlich für sämtliche Links. Da machst du nichts falsch, das ist eigentlich genau das, was passieren soll. 😉 Der Gedanke dahinter ist, dass du dadurch das Aussehen aller Elemente an einer einzigen Stelle zentral steuern kannst. Im Falle eines Redesigns musst du dadurch nicht jeden Artikel einzeln anfassen.
      Wenn du nur einige Links stylen möchtest, dann weise ihnen eine HTML-Klasse zu und style diese anschließend im CSS. Dadurch veränderst du nur das Aussehen derjenigen Links, die diese Klasse tragen:

      <a href="..." class="besondererLink">...</a>

      .besondererLink { background: #eeb9e5; }

      Hier habe ich das Konzept von Klassen näher erklärt: http://neontrauma.de/bloggen/coding-love/html-css-die-grundlagen.php

      Ich hoffe, das hilft dir weiter! 🙂

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.