Animation

Hover Effekte auf Tablets & Smartphones RICHTIG einsetzen

Level:
Das Video kann nur angezeigt werden, wenn Cookies erlaubt sind.
Cookies akzeptieren und Medien laden

Ich schätze mal die meisten legen Hover Effekte in Webflow zwar für Desktop Geräte richtig an, vergessen dann aber sie auf Touch-Geräten wie Tablets und Smartphones wieder zu deaktivieren. Warum das ein Problem ist zeige ich dir in diesem Video.

Der Hover Effekt wird nämlich auf beispielsweise Smartphones nicht mehr verlassen. Das fällt oft bei vielen Button nicht auf, da sie auf eine andere Seite verlinken und damit nicht mehr im sichtbaren Bereich sind. Aber gerade bei klickbaren Elementen wie einem Slideshow Button wird der Hover-Effekt nicht wieder verlassen.

Was stattdessen genutzt werden sollte, ist der „pressed” Zustand in Webflow. Also ein Effekt, der so lange aktiv ist, wie ein Finger einen Button drückt. Sobald der Finger dieses Element wieder verlässt, wird auch der normale Status wiederhergestellt. Damit kannst du dem Button mehr das Gefühl von einem richtigen Knopf geben.

Ergebnis anschauen
Icon für einen externen Link
Projekt im Webflow Designer öffnen
Icon für einen externen Link