Lernen Sie, wie Sie mit CSS Animationseffekte zu Buttons auf einer Web-Seite hinzufügen können.
Animierte Webbuttons erstellen

Mit CSS-Transitions können Sie einfache, aber elegante animierte Übergangseffekte zu Ihrer Web-Seite hinzufügen. CSS-Transitions sind z. B. Animationen, die Anwendern Feedback bei der Navigation durch eine Website geben. Häufig verwendete Effekte sind Änderungen an Farbe, Rahmen und Größe eines Buttons oder des zugehörigen Textes. Auf den Abbildungen zu diesem Tutorial ist der jeweilige CSS-Code hervorgehoben, der für solche Animationen verwendet wird. Laden Sie die Projektdateien herunter, um die Schritte in diesem Tutorial nachvollziehen und den vollständigen Code anzeigen zu können.

Dieses Tutorial zeigt nur einen Teil dessen, was Sie mit CSS-Transitions realisieren können. Laden Sie die Projektdateien herunter, und experimentieren Sie.

Aufbau von CSS-Transitions

Ein Übergangseffekt für ein Objekt, z. B. einen Button, erfordert zwei CSS-Stile – einen für den Normalzustand des Buttons und einen für den Zustand „hover“ (wenn der Cursor auf dem Objekt positioniert wird). 

In diesem Beispiel wird der Normalzustand des Buttons durch einen CSS-ID-Selektor („#button1“) definiert. Der Button-Stil im Hover-Zustand ist als Pseudoselektor („#button1:hover“) für denselben Button definiert. Ein Pseudoselektor gibt den Stil für ein Element in einem bestimmten Zustand vor, z. B., wenn ein Anwender auf einen Link klickt oder den Cursor darauf positioniert.

In diesem Fall ändert sich die Hintergrundfarbe von Blau in Rot. Dabei werden folgende vier Properties angewendet:

  • transition-property: die zu ändernde CSS-Property (Hintergrund).
  • transition-duration: die Dauer der Veränderung (0,3 Sekunden).
  • transition-timing-function: Geschwindigkeitsänderung im Zeitverlauf (Ease).
  • transition-delay: Zeitraum, nach dem der Übergang beginnt (0 Sekunden).
Transition definieren
Transition definieren
Übungsdatei öffnen
Übungsdatei öffnen

Vorbereitung

Öffnen Sie die Datei create-animated-website-buttons.html in Dreamweaver, und zeigen Sie die CSS-Datei styles.css in der Ansicht „Teilen“ an.

Farbänderung

Legen Sie CSS-Stile fest, die die Farbe des Buttons von Blau in Rot ändern, sobald der Anwender den Cursor darauf positioniert.

Für den Button im Normalzustand gibt die Property „background“ in der CSS-Anweisung die Farbe Blau vor. Die Transition-Property in derselben CSS-Regel gibt an, dass die Property „background“ sich ändert, sobald sich der Zustand des Buttons aufgrund einer Aktion verändert. Die übrigen Transition-Properties bestimmen, wie schnell und sanft die Änderung erfolgt.

  • Die Property „transition-timing-function: ease;“ lässt den Effekt langsam beginnen, schneller werden und gegen Ende wieder verlangsamen.

Der Pseudoselektor gibt vor, dass sich die Hintergrundfarbe des Buttons in Rot ändert, wenn der Anwender den Cursor darauf positioniert und damit den Hover-Zustand auslöst.

CSS (Normalzustand)

#button1 {
  ...
  background:#ADD7F4;
  transition-property: background;
  transition-duration: 0.3s;
  transition-timing-function: ease;
  transition-delay: 0;
}


CSS (Hover-Zustand)

#button1:hover {
  background:#EA575B;
}

Farbänderung
Farbänderung definieren

Farbänderung für Rahmen und Text

Definieren Sie CSS-Stile, die die Farbe von Rahmen und Text des Buttons verändern.

Für den Button im Normalzustand geben die CSS-Property „border-color“ einen hellblauen Rahmen und die CSS-Property „color“ einen fast weißen Text vor. Die Transition-Property“ in derselben CSS-Regel gibt an, dass die Farb-Properties „border-color“ (für den Rahmen) und „color“ (für den Text) sich ändern, sobald sich der Zustand des Buttons aufgrund einer Aktion verändert. Die übrigen Transition-Properties bestimmen, wie schnell und sanft die Änderung erfolgt.

  • Die Property „transition-timing-function: linear;“ bestimmt, dass die Geschwindigkeit des Effekts über die gesamte Dauer gleich bleibt.

Der Pseudoselektor gibt vor, dass sich die Rahmenfarbe und die Textfarbe in Dunkelblau ändern, wenn der Anwender den Cursor darauf positioniert und damit den Hover-Zustand auslöst.

CSS (Normalzustand)

#button2 {
  ...
  border-color: #7A97B2;
  color: #f4f4f4;
  transition-property: border-color, color;
  transition-duration: 0.1s;
  transition-timing-function: linear;
  transition-delay: 0;
}


CSS (Hover-Zustand)

button2:hover {
  border-color: #204F81;
  color: #183B61;
}

Farbänderung für Rahmen und Text
Farbänderung für Rahmen und Text definieren

Größenänderung

Legen Sie CSS-Stile fest, die die Größe des Buttons verändern.

Für den Button im Normalzustand geben die Property „width“ eine Breite von 400px, die Property „height“ eine Höhe von 100px und die Property „line-height“ eine Zeilenhöhe von 60px vor. Die Transition-Property in derselben CSS-Regel gibt an, dass die Properties „width“, „height“ und „line-height“ sich ändern, sobald sich der Zustand des Buttons aufgrund einer Aktion verändert.

Der Pseudoselektor gibt an, dass die Werte für die Button-Properties „width“, „height“ und „height“ erhöht werden, wenn der Anwender den Cursor darauf positioniert und damit den Hover-Zustand auslöst.

CSS (Normalzustand)

#button3 {
  ...
  width: 400px;
  height: 100px;
  line-height: 60px;
  transition-property:
       width, height, line-height;
  transition-duration: 0.3s;
  transition-timing-function: ease;
  transition-delay: 0;
}


CSS (Hover-Zustand)

#button3:hover {
  width: 420px;
  height: 120px;
  line-height: 80px;
}

Größenänderung
Größenänderung definieren

Farbwechsel für Hintergrund und Text

Definieren Sie CSS-Stile, die die Farbe von Hintergrund und Text des Buttons verändern.

Für den Button im Normalzustand geben die CSS-Property „background-color“ einen fast weißen Farbton und die CSS-Property „color“ einen grauen Text vor. Die Transition-Property“ in derselben CSS-Regel gibt an, dass die Farb-Properties „background-color“ (für den Hintergrund) und „color“ (für den Text) sich ändern, sobald sich der Zustand des Buttons aufgrund einer Aktion verändert.

Der Pseudoselektor gibt vor, dass die Hintergrundfarbe und die Textfarbe ausgetauscht werden, wenn der Anwender den Cursor darauf positioniert und damit den Hover-Zustand auslöst.

CSS (Normalzustand)

#button4 {
  background-color:#f4f4f4;
  color: #73746B;
  transition-property:
     background-color, color;
  transition-duration: 0.2s;
  transition-timing-function: ease;
  transition-delay: 0;
}


CSS (Hover-Zustand)

#button4:hover {
  background-color:#73746B;
  color: #f4f4f4;
}

Farbwechsel für Hintergrund und Text
Farbwechsel für Hintergrund und Text
Übergangseffekte im Browser prüfen
Übergangseffekte in einem Browser überprüfen

Klicken Sie auf Vorschau in Browser, und überprüfen Sie die Übergänge in Ihrem bevorzugten Webbrowser.

Speichern Sie die Datei, damit Ihre Änderungen angezeigt werden.

04/13/2018
War diese Seite hilfreich?