201003Sep

BonBon Buttons: Anschauliche CSS3-Schaltflächen

Zum Freitag gibt es heute etwas Süßes: Die BonBon Buttons von Simurai stellen eine gute Mischung aus kompaktem CSS3-Code und kreativen Ecken-Effekten dar. Der Entwickler hat die Schaltflächen mit dem Ziel umgesetzt, möglichst wenig Code zu schreiben und die Schaltflächen dabei dennoch flexibel zu halten. Das Resultat kann sich sehen lassen — neben den plastischen Beleuchtungen sorgt vor allem ein Rauschen (Noise) als Hintergrundbild für die entsprechende Haptik.

BonBon Buttons - Sweet CSS3 buttons

Das Schöne an den Buttons sind die Möglichkeiten, das Aussehen sehr einfach anzupassen. Dies wurde durch die Verwendung von mehreren CSS-Klassen ermöglicht:

  • <a href="#" class="button pink serif glossy skew">Link</a>

So können beispielsweise die Glanzeffekte durch das Entfernen der "glossy"-Klasse ausgeschaltet werden.
Der Entwickler der bunten Buttons sieht der Realität allerdings ins Auge und empfiehlt momentan noch nicht die Verwendung seiner CSS-Kompositionen — die Schaltflächen sollen als Demonstration der neuen CSS3-Effekte angesehen werden und lassen sich zudem nur schwierig in einen Webdesign-Stil integrieren. Für die Darstellung von CSS3-Effekten ist stets ein moderner Browser erforderlich. Bis genug Benutzer in diesen Genuss gekommen sind, wird sicherlich noch eine Weile vergehen.