My Favorite Button Hover Interaction

Class breakdown

Button (Class)

The button class is very simple. It's just a div block with some padding (1 REM x 1.5 REM), centered children using flex (align items: center, justify content: center), the hovered cursor set to pointer and a relative position used for the absolute positioned transition shape later on.

In my example I've also given it a white background color, black text and rounded corners (50 REM border radius).

Button Text Wrapper (Class)

This is the outermost wrapper for the two text elements needed for the hover interaction. It's simply a static div block with its overflow set to hidden. This overflow lets the inner wrapper move freely up and down on the y-axis while only having room to show one row of text to the user.

Button Text Inner Wrapper (Class)

This is the wrapper for the text itself. It wraps around both text rows used in the interaction, and is used to move up and down on the y-axis for the interaction. It's simply a static div block with its position set to relative.

Button Text (Class)

This class is just a simple text element. It shows up as the button's default state.

Button Text Absolute (Class)

This is the second text element. This one has an absolute position in order to be hidden in the button's default state. Remember that we gave the outer text wrapper a hidden overflow, and the inner text wrapper a relative position. This lets this text element to be placed under the first text element, causing it to fall completely out of view of the user.

Button Transition Shape (Class)

This is the shape that gets animated from hidden to visible using its scale. It has an absolute position and is spanning the full width and height of the button. It also has the same border radius setting as the button itself (50 rem).

I also gave it a 0 scale as default in order to hide it in the Webflow viewport.

The interaction

Hover in

The interaction is placed on the "Button" class and is super simple. The "Button Transition Shape" is animated from a scale of 0 (initial) to 1 while the "Button Text Inner Wrapper" is animated from a y-axis position of 0% to -100%.

Hover out

The second interaction (hover out) is animating the button in reverse. The "Button Transition Shape" is animated back to a scale of 0, and the "Button Text Inner Wrapper" is animated back to a y-axis position of -100% to 0%.

Video