01.02.2010
Ein bisschen Button-Feeling für Textlinks …
Dieser Artikel basiert auf “Make All Links Feel Subtly More Button-Like” (Chris Coyier, css-tricks.com).
Wenig Code - nette Wirkung. Genau so mag ich es.
Im oben benannten Artikel wird beschrieben, wie für ganz normale Textverlinkungen ein schaltflächenähnlicher Effekt erzielt werden kann. Das Ganze mit sehr sehr wenig css-Code. Ich habe das hier auf meiner Webseite umgesetzt und wenn ihr auf einen Textlink klickt, sollte dieser 1 px nach unten rutschen. Das ähnelt ein wenig dem Eindruck einer gedrückten Schaltfläche.
Dazu habe ich folgende Styleangabe in der zugehörigen CSS-Datei ergänzt:
a:active {
position: relative;
top: 1px;
}
Da Links in CSS Inline-Elemente sind, kann man nicht mit margin-top arbeiten. Padding ist auch ungünstig, weil damit die Größe der ganzen Box beeinflusst wird und u.U. umliegende Elemente verschoben werden. Die Lösung bietet position: relative.
Bei einem ganz normalen Klick mit der linken Maustaste auf einen Textlinks funktioniert das wunderbar. Wenn ich die mittlere Maustaste benutze (in Firefox wird bei mir damit ein neuer Tab im Hintergrund geöffnet) bewegt sich nichts. Ich habe keine Ahnung weshalb. Ist bei diesem kleinen Gimmick aber auch nicht wirklich wichtig.
—–
Grundlegende Infos zum Gestalten von Hyperlinks gibt es z.B. in der CSS-Kiste.
Oder unter little-boxes.de