Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

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

3 Reaktionen
Tanja Handl

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

Marco

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

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? *?*

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Finde einen Job, den du liebst