Advanced Button Animation in Webflow bauen

Im heutigen Webflow Tutorial zeige ich dir eine etwas advanced Button Hover Animation. Schau dir den Beitrag gern an und kopiere dir den Button in dein Projekt. Das Tutorial findest du auch auf YouTube.

‍

‍

Buttons sollen für den User einen wichtigen und “erlebnisreichen” Bestandteil einnehmen. Denn in jedem Fall hat dieser sich für einen weiteren Klick auf deiner Website entschieden. Demnach sollten deine Buttons Feedback geben und animieren.

Der Button besteht sowohl aus einer Hover Animation als auch aus einer Mouse move over Element Animation. Baue also zunächst das Konstrukt in Webflow und füge dann die Animationen hinzu.

‍

‍

Button Struktur

• Erstelle einen Link Block und style ihn nach belieben
• Füge einen Div Block in den Link Block. Das wir unsere Background Color, die sich über den Button ausrollen soll. Gib dem Background ein recht große Größe - so groß, dass in der Animation der Hintergrund den Button voll überdeckt.
• Der Hintergrund soll sich rund ausrollen, gib diesem demnach einen Borderradius (99rem z.B.)
• Setze den Link Block in Position relativ und den Background Div Block Position absolut

‍

‍

• Setze den Link Block auf Display flex box und richte ihn mittig aus
• Gib dem Link Block einen Overflow hidden

‍

Button Hover Animation

• Gebe dem Hintergrund Div unter Effects 0% Opacitiy
• Gib dem Button in den Interactions einen Hovereffekt
• Scale im Hover In den Hintergrund Div von 0 auf 1 und füge die Opacity auf 100% ein

‍

‍

• Im Hover Out baust du alles zurück

‍

‍

• Füge eine Mouse move over Element Animation der Section hinzu
• Richte die Animation so ein, dass Der Hintergrund Div Block deinem Mousezeiger auf x und y-Achse folgt

‍

‍

• Füge im Stylepanel dem Button einen Hover hinzu und ändere beim Hovern die Fontcolor nach dein Belieben
• Füge im None State eine Transition hinzu, um die Animation smooth zu halten

‍

Fertig.

‍