Archiv der Kategorie: CSS

Elf stylische CSS3 Buttons

Der Blog „Red Team Design“ (Englisch) hat ein tolles Beispiel veröffentlicht, wie man professionelle, aber trotzdem schlichte Buttons mit CSS3 erstellt. Die Buttons haben einen Farbverlauf, abgerundete Ecken und ein Icon.

CSS3 Buttons
CSS3 Icons

Das Besondere an diesen Buttons befindet sich im Quelltext. Wie man auf den Vorschau Bild sehen kann haben die Buttons Icons. Dies sind jedoch keine Bilder! Das hat den Vorteil, dass weniger Traffic entsteht und die Seite schneller lädt.

Jedoch sehen die Icons in jedem Browser anders aus, oder noch schlimmer, sie werden erst gar nicht angezeigt. Wer hierbei sofort an den Internet Explorer gedacht hat, liegt wieder einmal richtig. Wobei und so viel muss man den IE diesmal lassen, ab den IE8 werden die Icons angezeigt, wenn leider auch verzerrt. Im IE7 funktioniert zwar noch der Button, aber es wird kein Icon angezeigt. Der IE6 dagegen kommt mit diesen Buttons überhaupt nicht klar. Microsoft hat für den Internet Explorer viele Jahre lang Kritik bekommen und hat es sich zum Ziel gesetzt, diesen Rückstand auszugleichen. Der IE9 war ein Schritt in der richtigen Richtung, wie man auch bei diesen Icons feststellen kann. In der neuen Version werden die Icons nämlich so angezeigt, wie es sein sollte.

In dem Artikel findet man auch den gesamten Quellcode, der für diese Buttons nötig ist.