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:

Submit

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:

    
        
        Save
    

    
        
        Change Password
    

    
        
        Cancel
    

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):

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!“:

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