CSS Tutorial – Arten von HTML-Listen

Links mit CSS gestalten

Hyperlinks gehören zu den wichtigsten Elementen einer Website. Sie ermöglichen die Navigation und führen
Nutzerinnen und Nutzer zu relevanten Informationen. Daher ist es essenziell, Links optisch klar erkennbar und
nutzerfreundlich zu gestalten. CSS bietet dafür eine Vielzahl von Möglichkeiten.

Ein Link besitzt standardmäßig vier Zustände, die über Pseudoklassen gesteuert werden:

• a:link – Stil für nicht besuchte Links
• a:visited – Stil für bereits besuchte Links
• a:hover – Stil, wenn die Maus über dem Link schwebt
• a:active – Stil beim Klicken

Diese Zustände lassen sich individuell gestalten und mit Farben, Hintergründen, Rahmen, Schriftanpassungen oder
Effekten kombinieren.

Grundlegende Link-Styles

Ein klassisches Beispiel für vier unterschiedlich gestylte Linkzustände:

a:link {        /* unbesuchter Link */
    color: #ff0000;
    text-decoration: none;
    border-bottom: 1px solid;
}
a:visited {     /* besuchter Link */
    color: #ff00ff;
}
a:hover {       /* Maus darüber */
    color: #00ff00;
    border-bottom: none;
}
a:active {      /* aktiv geklickt */
    color: #00ffff;
}
    

Standard-Styles von Browsern

Wenn keine Stile definiert sind, zeigen Browser Links üblicherweise folgendermaßen an:

• Unbesuchte Links: blau und unterstrichen
• Besuchte Links: lila und unterstrichen
• Aktive Links: rot und unterstrichen

Der Hover-Zustand verändert sich jedoch nicht – außer Sie definieren einen Stil dafür. Moderne Websites sollten
Hover-, Active- und Fokuszustände bewusst hervorheben, um Barrierefreiheit zu verbessern.

Benutzerdefinierte Farben für Links verwenden

Sie können für jeden Linkzustand eine andere Farbe festlegen. Achten Sie dabei darauf, dass der Link klar vom
normalen Text unterscheidbar bleibt.

a:link {
    color: #1ebea3;
}
a:visited {
    color: #ff05f4;
}
a:hover {
    color: #a761ff;
}
a:active {
    color: #fe9800;
}
    

Unterstreichung entfernen oder anpassen

Viele Designs entfernen die Standard-Unterstreichung und legen stattdessen alternative Hervorhebungen fest.

a:link, a:visited {
    text-decoration: none;
}
a:hover, a:active {
    text-decoration: underline;
}
    

Moderne Browser unterstützen zudem erweiterte Unterstreichungsoptionen:

a {
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}
    

Links wie Buttons aussehen lassen

Mit CSS können Links auch wie klassische Schaltflächen aussehen. Das ist besonders nützlich für Call-To-Action
Elemente.

a:link, a:visited {
    color: white;
    background-color: #89c03d;
    display: inline-block;
    padding: 10px 20px;
    border: 2px solid #5b7f28;
    text-decoration: none;
    text-align: center;
    font: 16px Arial, sans-serif;
}
a:hover, a:active {
    background-color: #b2f951;
    border-color: #416d04;
    color: black;
}