Blaue Farbe bei link entfernen

[Berni]

Hi,

Mit welcher CSS-Angabe kann ich in folgendem Beispiel die blaue Farbe des Links unterdrücken, so dass die voreingestellte Textfarbe verwendet wird?

<div>  

  <button class="btn"><a href="............>Ziel1</a></button> 
 
  <button class="btn"><a href="............>Ziel2</a></button>  

</div>

[Gunnar Bittersmann]

@@Berni

<div>  

  <button class="btn"><a href="............>Ziel1</a></button> 
 
  <button class="btn"><a href="............>Ziel2</a></button>  

</div>

Dein Markup ist fehlerhaft, und damit meine ich nicht die hier vergessenen schließenden " bei den href-Attributen.

Interaktive Elemente dürfen nicht verschachtelt werden; a darf nicht in button vorkommen. Das musst du berichtigen.

Zunächst wäre aber zu klären: Warum soll ein Link wie ein Button aussehen? Es sind unterschiedliche UI-Elemente mit unterschiedlichen Funktionen; i.A. sollten sie deshalb unterschiedlich aussehen und nicht das eine wie das andere.

---

Mit welcher CSS-Angabe kann ich in folgendem Beispiel die blaue Farbe des Links unterdrücken, so dass die voreingestellte Textfarbe verwendet wird?

Für die Textfarbe ist die color-Eigenschaft zuständig. Wobei hier die Schlüsselwörter currentColor und inherit dasselbe bewirken.

🖖 Live long and prosper

[Raketenwilli]

Zunächst wäre aber zu klären: Warum soll ein Link wie ein Button aussehen? Es sind unterschiedliche UI-Elemente mit unterschiedlichen Funktionen; i.A. sollten sie deshalb unterschiedlich aussehen und nicht das eine wie das andere.

Das ist eine Frage, an der sich Glaubenkriege entzünden können…

Womöglich hat der Link in dem, was Berni gerade baut, aus Nutzersicht genau die Funktion eines Buttons. Dann sehe ich keinen Hinderungsgrund, ihn auch so aussehen zu lassen.

Klar könnte man einfach einen Button bauen, der einfach location.href ändert. Wärst Du dann einverstanden? Ich fände dann den Umweg über js „notlos“.

[Rolf B]

Hallo Raketenwilli,

der Usecase für Buttons, die wie Links aussehen (oder andersrum) ist aus meiner Sicht eine Navigation, in der einige Nav-Items auf andere Seiten verlinken und andere Items per JS Aktionen auf der Seite auslösen. Oder – moderner – per Popover-API oder als Command-Button Popups oder Dialoge öffnen.

Aber wie Gunnar sagte: im Allgemeinen sollten Links und Buttons unterscheidbar sein. Insbesondere sollten Links immer vom umgebenden Text unterscheidbar sein. Deswegen muss man gut überlegen, bevor man an der Farbe von a-Elementen herummacht oder die Unterstreichung entfernt, „weil's schlecht aussieht“ - es ist noch viel schlechter, wenn die Besucher blind rumtabben oder hovern müssen, um die Links auf der Seite zu finden.

Rolf

[Gunnar Bittersmann]

@@Rolf B

es ist noch viel schlechter, wenn die Besucher blind rumtabben oder hovern müssen, um die Links auf der Seite zu finden.

Das werden sie eher nicht tun. Sie finden die Links nicht, besuchen andere Teile der Website nicht, sondern suchen die gewünschten Informationen bei der Konkurrenz.

🖖 Live long and prosper

[Gunnar Bittersmann]

@@Rolf B

Insbesondere sollten Links immer vom umgebenden Text unterscheidbar sein. Deswegen muss man gut überlegen, bevor man an der Farbe von a-Elementen herummacht oder die Unterstreichung entfernt, „weil's schlecht aussieht“

Beim Tagesspiegel haben wir an der Farbe herumgemacht: wir haben sie weggenommen. Das soll nicht heißen, Linktitel wären transparent, sondern sie haben dieselbe Farbe wie der übrige Text. Finde ich OK; die Unterstreichung ist das wichtigere Unterscheidungsmerkmal. Da sollte man nicht dran herummachen; Links im Fließtext gehören unterstrichen, auch wenn sie eine andere Farbe haben.

Anderes gilt für Links im Navigationsmenü (wenn dies durch seine Position und Gestaltung eindeutig als solches erkennbar ist). Da müssen die Links nicht unterstrichen sein. Sollten sie IMHO auch nicht, um die Lesbarkeit zu verbessern.

🖖 Live long and prosper