Gut skalierbare CSS3-Buttons ab IE 8

Designer Catalin Rosu stellt immerhin 10 verschiedene, grafisch wirkende Buttondefinitionen im Rahmen seines kleinen CSS vor. Darunter finden sich die stets benötigten Klassiker Delete, Add, Edit und Save, sowie einige weitere.

Die Einbindung der Symbole erfolgt unter Verwendung der den Zeichen entsprechenden HTML Entities. Auf diese Weise muss keine Grafik eingepasst und formatiert werden. Die Buttons funktionieren als Nur-Text. Dadurch ist eine optimale Skalierbarkeit, sowie die leichte Anpassung der Styles hinsichtlich Textfarbe und/oder Hintergrund gegeben.

Rosu hat die Iconerweiterungen als Klassen definiert. So ist das Hinzufügen eines Icons simpel durch das Hinzufügen der entsprechenden Klasse am jeweiligen A-Tag möglich.

Ab dem IE8 funktioniert die Darstellung der Symbole, ältere IE-Versionen zeigen den Button entsprechenden ohne das grafische Icon. Moderne Browser rendern auf unterschiedlichen OS die Symbole unterschiedlich, aber stets zum System passend. Rosu bietet eine Reihe aussagefähiger Screenshots. Insbesondere die Darstellung mit dem Mobile Safari weiß zu gefallen.

Den Stylesheet-Code könnt ihr per Copy und Paste direkt beim Red-Team Designblog erhalten.