Entwicklung & Design

Schicke grafische Buttons mit CSS3 und HTML Entities [inklusive Code]

Alle CSS3 Buttons aus dem Hause Red Design im Überblick

Catalin Rosu bietet Webdesignern kostenlos ein kleines CSS-Stylesheet zur Erstellung grafischer Buttons. Das Besondere ist, dass die Buttons nicht mit Pixel-Icons arbeiten, sondern mit HTML Entities funktionieren. So können verschiedene Symbole, wie das Pluszeichen oder das Briefumschlagssymbol ohne Pixelgrafik realisiert werden. Die Vorteile liegen auf der Hand…

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.

Alle CSS3 Buttons aus dem Hause Red Design im Überblick

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.

CSS3 Button ohne Symbol

CSS3 Button mit Plus-Symbol durch das einfache Hinzufügen der Klasse Add

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.

Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

6 Kommentare
Tanja Handl

Hübsch und wirklich einfach. :-)

@ Marco: Der sieht doch jetzt schon fast gleich aus, nur in Pink? Oder hab ich da was verpasst? *?*

Antworten
Marco

@Tanja … Jup … Kosmar hat uns damit glücklich gemacht.

Antworten
Tanja Handl

@ Marco: Alles klar – sieht gut aus. :-)

Antworten

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.