tutorialbox.de

<< zurück zum Artikel "Button-Animation mit CSS3 statt JavaScript"

Button-Animation mit CSS3

Demo zum Artikel "Button-Animation mit CSS3 statt JavaScript"

Hier ein kleines Beispiel, wie man Button-Rollover-Effekte mit CSS3 erstellen kann. Als Inspiration diente dabei das neue YouTube-Design.
Das HTML-Markup ist zukunftsorientiert mit HTML5-Tags umgesetzt, und ist so simpel wie möglich gehalten. Damit der Effekt (zumindest teilweise) im Internet-Explorer funktioniert, gibt es die Datei "ie-hack.css", die man über "conditional comments" einbauen kann.

Live-Demo:



Screenshot:

YouTube-Button Style - Screenshot

HTML5-Markup:

 

CSS3:

 

Internet-Explorer-Hack: