Button Hover + Click Animation in Webflow bauen
Heute zeige ich dir, wie du in Webflow sowohl einen Hovereffekt als auch ein Clickeffekt bauen kannst. Button Animationen geben dem User unmittelbares Feedback und gehören zum Websiteerlebnis einfach dazu.
In diesem Tutorial möchte ich, dass der Button sich beim Hovern ca. 10 Pixel nach oben bewegt und beim Klicken sich wieder 5 Pixel nach unten bewegt / drückt. Erfahre hier, wie Merlin den Buttoneffekt in Figma anlegt.
Schau dir das Tutorial gern auf unserem YouTube Channel an!
Wieso Hover- und Clickanimationen?
Wie in der Einleitung bereits beschrieben, gehören Button Effekte einfach zur User Experiance dazu und werten deine Website nicht nur auf sondern geben dieser einen interaktiven Charakter.
Der erste Grund eine Click-, oder in Webflow “Pressed”, Animation zusätzlich zum Hover hinzuzufügen, ist die zusätzliche interaktive Visualisierung deiner Buttons. Der User bekommt nicht nur Feedback beim hovern sondern auch beim klicken, wodurch ein physikalisch realistischeres Erlebnis entsteht.
Der zweite und für mich noch essenziellere Grund, eine Clickanimation hinzuzufügen, ist, dass im responsive Design beispielsweise auf dem Smartphone Hovereffekte nur schlecht dargestellt werden können. Dadurch, dass wir auf dem Smartphone eher tippen und wischen, geht in Webflow die Hoveranimation bei Touchdevices einfach unter und sollte mit einer Clickanimation kompensiert werden.
Hover in Webflow hinzufügen
Der Hovereffekt ist in Webflow recht simpel umsetzbar. Wenn du den Button auswählst, dem du einen Hovereffekt geben möchtest, kannst du oben im Stylepanel beim Klassennamen verschiedene States (Zustände) auswählen - Unter anderem “Hover”.
Ob du im Hover - State bist, kannst du daran erkennen, dass neben dem Klassennamen in grün “Hover” auftaucht.
Nun kannst du nach belieben deinen Hovereffekt definieren. Um unsere vorgegebenen 10 Pixel nach oben zu erreichen, fügst du im jeweiligen Button im Stylepanel unter Effekte ein “Move” ein. Hierfür gehst du zu “2D & 3D Transforms” und gibst dem Button unter “Move” eine Bewegung von -10 Pixel auf der Y-Achse mit. Sobald du wieder zum State “None” wechselst, also deiner Ausgangslage ohne spezifischen State, ist der Hover bereits integriert und funktioniert.
Pressed / Click Animation in Webflow hinzufügen
Um in Webflow eine Clickanimation hinzuzufügen, gehst du im Button in den State “Pressed”. Hier kannst du entweder die gleiche Einstellung wie im Hover State oder eine aufbauende Animation zum bestehenden Hover erstellen. In unserem Beispiel gibst du dem Button beim Klick einen “Move” von -5 Pixel auf der Y-Achse mit.
Um zu erkennen, ob auch wirklich eine Pressed Animation hinzugefügt wurde, kannst du mit Klick in die Auflistung der einzelnen States kleine Pünktchen neben den definierten States erkennen. Diese Punkte sagen dir, ob hier eine Abweichung von der Ausgangssituation definiert wurde.
Transition in Webflow hinzufügen
Für weicher und länger animierte Effekte, kannst du im “None” State unter “Effects” eine “Transition” (Übergang) hinzufügen, um deiner Animation beispielsweise eine längere Zeitspanne zum abfeuern zu geben.
In unserem Beispiel gibst du dem Button eine Transition von 200ms mit. Wie du siehst, gibt es viele verschiedene Einstellungen, denen du eine Transition mitgeben kannst. Wichtig zu wissen: Du kannst auch mehrere Transitions hinzufügen. Der Einfachheit halber kannst du dem Button die Einstellung “All Properties” geben, in welcher alle angelegte Effekte mit der gleicher Transition abgefeuert werden.
Webflow - einfache Buttonanimationen
Im Vorschaumodus kannst du nun gut erkennen, dass Webflow beide Effekte angelegt hat. Am Ende lässt sich sagen, dass du mit Webflow recht schnell über das Stylepanel Buttonanimationen bauen kannst, ohne eine kompliziertere Animation im “Interaction” Bereich erstellen zu müssen. Simpel aber wirkungsvoll.
