Webflow's Button Animation (Text w/Arrow)

Can someone help me understand how Webflow built their text buttons with arrows animation?

Seems pretty simple:

A link block with two divs inside to control the text and icon.

But what I don’t understand is how the hover animation works…

Can anyone explain this to me?


Here is a reference: Website Design Tools & Software | Webflow

Hi Kevin,

this animation is simple and can be easily recreated using Webflow’s interactions, here is how: you need to create an interaction that triggers when the parent div element is hovered on. give the arrow icon a transform(move) of 0px for X and 0px for Y for the initial state after that give it 8px for X and -9px for Y with a duration of 700ms. We do something similar for the color of our text as well. We can also give our actions custom timing functions to control how they change from one state to another. finally, we create a hover out interaction that does the opposite.

Hey @zafremedia,

Thank you for your reply.

That’s how I have it built on my site. I guess I’m curious how they adjusted the smoothing? Is the cubic-bezier just additional code added to a global stylesheet?

you can adjust the transition by selecting custom in the easing section of the interaction and trying out different transition functions to see which one creates the desired smoothing effect.

and no there is no need to add anything to the global stylesheet. also here is a function that i like to use for my projects that is pretty smooth. function: cubic-bezier(.58, 0, .01, 1)