Simple Button Animation mit CSS3

Vor einiger Zeit erklärte ich in einem kleinen simplen Howto wie man mit CSS3 einen Button erstellen kann. Nun möchte ich zeigen, wie man diesen Button auch noch ein bisschen animieren könnte. Da gibt es beispielsweise die Möglichkeit, dass ein gesofteter Übergang beim Überfahren stattfindet. Auf das Auge des Betrachters wirkt das sehr angenehm, als dieser harte Wechsel von zwei Farben. Schauen wir uns das Ganze nun mal im Detail an.

Button mit CSS3 ohne Animation

Hier noch mal der Button Code ohne jegliche Animation. Den dürften aufmerksame Leser meines Blogs gut kennen. Fährt man mit der Maus über den Button, wechselt die Farbe von blau auf grün. Nun wirkt das natürlich wenig ansprechend, wenn auch machbar. Mit CSS3 kann man nun eine kleine einfache Animation hinzufügen.

Button

.button1{background-color: #1874CD;
color: #FFF;
padding: 5px;
border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px}
.button1:hover{background-color: #008B45}

Button mit CSS3 mit Animation

Dank CSS3 braucht man hierfür eigentlich kein JavaScript mehr. Lediglich als Fallback für Internet Explorer und ältere Browser wäre dies eine Überlegung. Ich verzichte darauf, da es nur ein Button-Hover-Effekt ist. Wer die Animation nicht sieht, der hat eben einen harten Farbwechsel drin. Damit kann man leben. Nun zu dem Code, der in die Beispielklasse „button1“ von oben eingefügt werden muss.

Button

-moz-transition-duration:3s;
-webkit-transition-duration:3s;
-o-transition-duration:3s;
transition-duration:3s

Et voilà! Schon hat man einen sanften Farbübergang geschaffen. Ich habe den Wert mit 3s absichtlich gewählt, um es besser demonstrieren zu können. Natürlich kann der Wert kleiner bzw. größer gewählt werden. Das richtet sich immer nach dem Einsatzzweck. Denn dieser Effekt ist nicht nur für Button interessant.

CSS3 Transitions können noch viel mehr

Das war jetzt nur das CSS3-Attribut „transition-duration“. Mit Transitions lassen sich noch viel mehr spannende Dinge anstellen. Ein recht ausführliches und gut geschriebenes Tutorial gibt es auf css3.info, allerdings in englischer Sprache. Dort gibt es auch weitere Animationsbeispiele.


Avatar von reraiseace
Autor: Markus Werner (reraiseace) Twitterreraiseace, Google+reraiseace, Twittercb_werner
Ich bin Redaktionsvolontär bei der COMPUTER BILD in Hamburg, Fernstudent am Deutschen Journalistenkolleg und schreibe auf re{raise}ace privat über Webdesign und Programmierung. Seit 2015 schrieb ich auch regelmäßig für andere Medien.

0 Kommentare

Du kannst diesen Artikel nicht mehr kommentieren.