Button Border Underline Slide In

Design help General
1

Hi Guys & Gals,

Is there a way to get a bottom border within a button to slide from left to right?

Example (top 3 buttons e.g ‘The Wine’: Home

Any help would be great (note the web I am linking to wasn’t built in webflow)

Many Thanks

Matt

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

Hi Matt,

Great question! :webflow_heart:

I would suggest cloning the Avocado UI Kit which contains an interaction that you may can use.

The UI kit can be found at https://webflow.com/website/Avocado-Webflow-UI-Kit

And, the button interactions can be viewed at the following URL:

Great question!

Hopefully this was helpful :bowing_man:

3

I was playing around and also made a quick example, using interactions affecting to multiple elements: https://webflow.com/website/Navlink-Border-Interaction, not exactly the same effect, but maybe might help give some ideas.

1 Like
4

Thanks guys! Some real good advice there and lots of ideas.

Cheers again - keep up the good work :+1:

5

I’m unable to find out how it’s done :weary:

I’d like to recreate the “read more link” hover interaction. I see no interactions applied nor styles on hover? :thinking:

I also tried to copy the css code into my project, but nothing.