Underline Button Interaction in Framer

Copy component

Underline Button Interaction in Framer

Copy component

Nandi Muzsik

How can I improve Framer Uni?

Let me know if there’s a missing feature or something that could be improved.

Share feedback

Nandi Muzsik

How can I improve Framer Uni?

Let me know if there’s a missing feature or something that could be improved.

Share feedback

Interaction

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.

image of Nandi Muzsik

Created by

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

Related Lesson

Related Lesson

Related Lesson

About the resource

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.

About the resource

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.

About the resource

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

Button underline Framer component variants.

button underline Framer component variants

Button underline Framer component variants.

button underline Framer component variants

Button underline Framer component variants.

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

More resources

More resources

  • Stylized digital art of a woman wearing sunglasses, duplicated in a layered, mirrored effect within an oval frame, with a cursor hovering over the image

    Repeat Image Hover Effect in Framer

    Interaction

    Stylized digital art of a woman wearing sunglasses, duplicated in a layered, mirrored effect within an oval frame, with a cursor hovering over the image

    Repeat Image Hover Effect in Framer

    Interaction

    Stylized digital art of a woman wearing sunglasses, duplicated in a layered, mirrored effect within an oval frame, with a cursor hovering over the image

    Repeat Image Hover Effect in Framer

    Interaction

  • Fashion advertisement featuring a person standing on stairs dressed in a white and red outfit, overlaid with scattered text and a cursor icon, against a dark background

    Hover Cursor in Framer

    Interaction

    Fashion advertisement featuring a person standing on stairs dressed in a white and red outfit, overlaid with scattered text and a cursor icon, against a dark background

    Hover Cursor in Framer

    Interaction

    Fashion advertisement featuring a person standing on stairs dressed in a white and red outfit, overlaid with scattered text and a cursor icon, against a dark background

    Hover Cursor in Framer

    Interaction