Underline Button Interaction in Framer

Underline Button Interaction in Framer

Underline Button Interaction in Framer

Underline Button Interaction in Framer

Interaction

Interaction

Interaction

Interaction

Underline Button Interaction in Framer

Underline Button Interaction in Framer

Underline Button Interaction in Framer

Underline Button Interaction in Framer

This is a button interaction in Framer that adds an underline, and guess what? It uses zero code. It's a tricky interaction as the underline pops in from the left and goes out to the right. But hey, we can nail it using a secret technique.

This is a button interaction in Framer that adds an underline, and guess what? It uses zero code. It's a tricky interaction as the underline pops in from the left and goes out to the right. But hey, we can nail it using a secret technique.

This is a button interaction in Framer that adds an underline, and guess what? It uses zero code. It's a tricky interaction as the underline pops in from the left and goes out to the right. But hey, we can nail it using a secret technique.

This is a button interaction in Framer that adds an underline, and guess what? It uses zero code. It's a tricky interaction as the underline pops in from the left and goes out to the right. But hey, we can nail it using a secret technique.

Underline Button Interaction in Framer
Underline Button Interaction in Framer
Underline Button Interaction in Framer
Underline Button Interaction in Framer

Copy component

Copy component

Copy component

Copy component

Features

The secret technique for creating this interaction? It's essentially adding an "appear" interaction to the "line out" variant to get the line back to the "default" variant (that's the left side). This happens because appear interactions automatically trigger when the variant shows up on the site.

Still, we've gotta pull another rabbit out of the hat to make sure that the line doesn't animate as we go back from "line out" to the "default" variant. So, we set the "default" variant's transition to instant, making all animations going into "default" happen instantly.

button underline Framer component variants
Step 01 outline

Step / 01

Remix the project.

Step 2 outline

Step / 02

See how it's built.

Step 3 outline

Step / 03

Try recreating it for practice, or copy and paste it to your project.

Free Framer Course

Learn how to create stunning websites with ease by learning the fundamentals of Framer.

Free
Framer Course

Learn how to create stunning websites with ease by learning the fundamentals of Framer.

Free Framer Course

Learn how to create stunning websites with ease by learning the fundamentals of Framer.