Streaming live at 10am (PST)

Button Border Underline Slide In


#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’: http://maintenanceaccounts.com/sw2/

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:
http://avocados.webflow.io/menu#d-button-hovers

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.


#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.