Markup

Buttons, Buttons, Buttons

Wenn es um Formulare geht verwendet man oft input-Elemente zum Abschicken. Und meist muss man sich auf das browserseitige Aussehen verlassen, denn eine wirklich einfache Gestaltung per CSS gibt es nicht. Dabei gibt es sie doch: Buttons.

Beide Elemente funktionieren in Formularen:



Das Element button wird lediglich im Safari optisch anders behandelt als input type="submit" – diese Unterschiede kann man sich aber zunutze machen, wie Kevin Hale bei Particletree zeigt: Für den Formularservice Wufoo nutzte man button-Elemente, die durch Bilder und ein wenig CSS so gestaltet wurden, dass man schon optisch die Funktion des Buttons erkennen kann.

Hier das verwendete HTML:


per CSS gestaltete Buttons

Dass die beiden letzten Buttons eigentlich Links sind, liegt daran, dass es in vielen Webanwendungen mehr Sinn macht, den Nutzer über die URL zu einer bestimmten Aktion zu führen. Die Nutzbarkeit bleibt erhalten. Beide Elemente können auf die gleiche Weise gestaltet werden und werden optisch eins. Buttons (auch wenn sie nur optischer Natur sind) werden im Zusammenhang mit Formularen schneller erkannt.

Alles zu Buttons und ihrem Einsatz bei Kevin Hales‘ „Rediscovering the Button Element“.

Mehr zu CSS-Buttons

Aber auch Roger Johansson hat sich mit Buttons befasst: Creating bulletproof graphic link buttons with CSS (Demo):

Kugelsichere Buttons mit CSS

Oft verwendet wird in diesem Zusammenhang auch die Sliding-Doors-Technik von Douglas Bowman, die auch Alex Griffioen in seinem Artikel „How to make sexy buttons with CSS“ nutzt. Mittlerweile ist der Artikel auch auf Deutsch erschienen und bei Alexander Hahn auffindbar: „CSS Buttons erstellen – sexy!“:

Sexy Buttons mit Slidings Doors Technik

Ganz im Trend liegen damit auch Hedger Wangs „Simple Round CSS Links ( Wii Buttons )“:

Sexy Buttons mit Slidings Doors Technik

Kategorie: Markup

von

Hallo, ich bin Nadja und arbeite als freie Webdesignerin in Berlin. Seit den 2000er-Jahren ist das Internet mein berufliches Zuhause, hier im cne _LOG schreibe ich erst seit Anfang 2006 zu den Themen Webdesign, Webstandards und vor allem auch Wordpress.

1 Kommentare

  1. Sehr cool, besten Dank für den hochinteressanten Link =)

    Ich bin mir sicher, dass ich das in Kürze mal verwenden werde! 🙂

Kommentare sind geschlossen.