Der Korsti bloggt über Web, Design und Webdesign

Physischer Knopf-Klick-Effekt mit CSS

Vielleicht hat’s der ein oder andere in den letzten Tagen schon mitbekommen: Alle Links auf dieser Website bewegen sich beim Klicken um einen Pixel nach unten. Das sieht ganz fein aus, wie ich finde – als würde man einen Knopf oder einen Button drücken. Natürlich ist es nur eine kleine Spielerei, aber ein toller Effekt, den ich mir beim Webzeugkoffer abgeguckt habe.

Umzusetzen ist das ganz einfach mithilfe von Stylesheets und der folgenden Zeile Code:

a:active { position: relative; top: 1px; }

So wird beim Klick (a:active), der komplette Link um einen Pixel nach unten verschoben. Natürlich kann man Links auch nach oben verschieben (bottom: 1px; oder top: -1px;) oder den Effekt bei Linkberührung benutzen (a:hover).

28. April 2009, 07.55 Uhr Kommentar schreiben Trackback
, ,

8 Reaktionen zu “Physischer Knopf-Klick-Effekt mit CSS”

Trackbacks

Kommentare

  1. Björn Björn am 28. April 2009 um 11.21 Uhr # Reply to this comment

    Danke für die Blumen! Aber Ehre, wem Ehre gebührt. Ich bin zum ersten Mal bei Gerrit darauf gestoßen, der das mal bei sich im Blog vorgestellt hat.


  2. Marcel Marcel am 28. April 2009 um 11.24 Uhr # Reply to this comment

    @Björn: Tatsächlich, auf praegnanz.de wird das ja auch genutzt ;-) Ist mir da bisher noch gar nicht aufgefallen – danke für den Quellenhinweis!


  3. Rafael Bugajewski Rafael Bugajewski am 28. April 2009 um 16.34 Uhr # Reply to this comment

    Würde das nicht ein wenig natürlicher aussehen, wenn man den Button auch noch um einen Pixel zur Seite verschiebt? Ist nur so eine Frage…


  4. Marcel Marcel am 28. April 2009 um 21.07 Uhr # Reply to this comment

    @Rafael Bugajewski: Kann man machen, muss man aber nicht ;-) Mir gefällt’s so ganz gut :-)


  5. Chrissi Chrissi am 28. April 2009 um 22.51 Uhr # Reply to this comment

    Finde ich gut, gibt mir ein gutes »Klick-Gefühl« :-)


  6. FreeComp FreeComp am 3. Juni 2009 um 15.28 Uhr # Reply to this comment

    Ziemlich schlicht aber gut. Hab das auch jetzt auch auf meiner Website, Vielen Dank!!