Streaming live at 10am (PST)

Left to Right Background fill on Button Hover


#1

I’d like a button , that only has a white stroke in it’s initial state, to fill with color upon hover. However I’d like that color to fill left to right horizontal across the button.

Can’t seem to find a transition or an easing state that does this in ‘timed actions’

Send help! Thanks!


#2

Hi there Lizz

If you take the link block you can a add a div as a background and move that around using IX2.

Makes sense or should I break it down?


#3

It might make sense if I knew what IX2 was!


#4

Sorry, it’s easy to use language or abbreviations that maybe not everyone is aware of.

IX2 is Interactions 2.0, it’s the one that is on by default. In the designer, the panel on your right and the tab to the far right with the flash icon is interactions. Have you used it before?


#5

Yeah! I have it set up as the mouse hover, then fill with red - but I want the fill to come in from the left and fill the bar (like a loading bar kind of) and I can’t find an interaction that does so.


#6

I think you have to do it with another div acting as a background to get the effect you want.

Hang on, I’ll make a test site =)


#7

here’s an example using css


#8

Just made this

http://button-fill-on-hover.webflow.io
You have great control over what happens with that method.

Hang on I make another like the Code Pen =)


#9

The one you made looks great! How do I get that transition on my button?


#10

Here’s the read only
https://preview.webflow.com/preview/button-fill-on-hover?preview=f3a468a3342fc15c082b9bfcb30e697a

See if you can make anything out of it.


#11

I made a css only effect that is not exactly what you was after but close =D Check the preview and page 2.


#12

I think I see what you did here, I’m going to give it a try after lunch and let you know how it goes.

Thank you so much Jorn!


#13

http://button-fill-on-hover.webflow.io/home-copy

Sorry I got family business now but check the other side in the preview. you can make it work without IX2 if not the button is more then 200 px wide. I’ll check in later if you have more questions =)

good luck


#14

Hope your family business is going okay.

I can’t seem to get the div block inside the button?


#15

Well I figured out how to get the divs in side of divs but I can’t figure out how to do the initial move and display none on the background, but I figured out how to make it come in & fill.


#16

What did you think about the solution on the other button? It was like the solution on CopdePen. Easier to set up without extra element and IX2.


#17

Yeah the second one felt more fluid too, is it a different set up?


#18

Yes. In hover state of your button you set a inner shadow. Max px is 200 so think about that.

35

Then go back to the normal state of the button and set the transition.

05

You can also check how I did with the preview link. It’s the second page.


#19

I’m leaving for the weekend. Going to give this a try later, maybe this weekend on my personal machine. Thank you so much for all your help!