Immer wieder sieht man, wie Webmaster versuchen mit „Workarounds“ wie „onclick“ JavaScript Buttons als Links zu benutzen, dabei ist die umgekehrte Herangehensweise doch eigentlich viel nahe liegender, nämlich ganz normale Links zu benutzen und diese via CSS als Button darzustellen.
Dabei hat man u.a. den Vorteil, dass man das CSS nur einmal erstellen muss und die entsprechende Klasse dann beliebig weiter verwenden kann, außerdem sind die Gestaltungsmöglichkeiten natürlich um ein vielfaches umfangreicher, mit aktuellem CSS gibt es ja kaum etwas, das sich nicht so darstellen ließe, wie man es sich wünscht.
Im Grunde sieht so ein Button in HTML dann wie ein einfacher Link aus, z.B. so:
Und das sieht auf der Webseite dann so aus:
Nun zu dem dafür nötigen CSS Code (Erklärungen zu den einzelnen Punkten im Anschluß):
.linkbutton {
padding: 6px 8px;
background-color: #aaa;
color: #fff;
border-radius: 5px;
border: solid 1px #333;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
user-select: none;
text-decoration: none;
}
.linkbutton:hover {
color: #fff;
background-color: #999;
text-decoration: none;
}
.linkbutton:active {
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5);
background-color: #888;
}
Das meiste hier ist ja eindeutig / Standard CSS, Hintergrundfarben, Rahmenfarben etc, zu ein paar Dingen aber noch eine kurze Anmerkung.
border-radius: Hier gibt man den Radius der abgerundeten Ecken in Pixel an, man kann auch 4 Werte angeben und so für jede Ecke einen anderen Radius festlegen.
text-shadow: Der „Textschatten“, hier kann man diverse Einstellungen für den Textschatten vornehmen, da es da so einige Möglichkeiten gibt siehe dazu bitte W3Schools: text-shadow
box-shadow: Im Grunde wie text-shadow, nur für die Umrandung der Box. W3Schools: box-shadow
user-select: Die Einstellung „none“ bewirkt hier einfach, dass man den Text nicht auswählen kann (ist ja bei „echten“ Buttons auch nicht möglich und wirkt bei CSS Buttons imho auch manchmal etwas „befremdlich“)
Diese CSS Styles sollten mit allen aktuellen Browsern problemlos funktionieren, wenn ihr aber auch (deutlich) ältere Versionen unterstützen wollt, würde ich empfehlen, das ganze noch um die jeweiligen alten „Vendor Prefixe„ zu erweitern.
Sämtliche Farben, Radien, Schriftarten etc lassen sich natürlich wie gewohnt mit CSS weiter stylen, dies soll nur ein kleines, grundlegendes Beispiel sein, wie man Links als Buttons darstellt.
