Button-Animation mit CSS3 statt JavaScript

0
662
CSS3-Buttons Screenshot

Nachdem YouTube in den letzten Wochen sein Re-Design mit großen Schritten vorantreibt, habe ich es mir heute mal genauer angesehen. Man merkt dass Google als Kopf dahinter steckt, denn im Gesamteindruck wirkt es auf mich elegant reduziert auf das Wesentliche, frei nach dem Motto „Weniger ist oft mehr„. Besonders gefallen haben mir aus Sicht des Webdesigners, die Select-Buttons im Footer, und ich habe mich gleich daran gemacht ein kleines Tutorial zu schreiben.

CSS3 YouTube-Buttons

Das Ganze funktioniert ohne jQuery, JavaScript oder Flash, und ist komplett mit CSS3-Styles und Transitions umgesetzt. Am besten sieht die Animation auf dem Mac, im Safari- oder Firefox-Browser aus, aber auch im Internet Explorer 9 funktioniert es. Mit der Einschränkung, dass abgerundete Kanten nicht möglich sind.

WEITER ZUR DEMO