Streaming live at 10am (PST)

Button background scale on hover


#1

I’m wondering if anyone can help me with a button hover transform. I would like to scale the button background but not the text in the button. I can only seem to transform the entire button.

Thanks!


Here is my site Read-Only: https://preview.webflow.com/preview/sandbox-0bc4ff?preview=fbf329dd08b1efefe6453073ec77e355
(how to share your site Read-Only link)


#2

On your link the bg of the button is only a blue color. What do you mean by scaling the background?


#3

Yeah so how the button currently works, when you hover over the button (on desktop) the button scales in size using transform. The problem is the text also scales, but I want just the blue pill background to scale.


#4

I ended up getting it to work correctly using border, but I could see that becoming an issue down the road is you wanted the same scale effect but with something like the background image of a div. Do you happen to another a different way to achieve this? Also, if you check out the updated link, when you mouse out of the button it snaps back to the original size instead of animating back down. Do you know how to animated mouse out effects of the button? Thanks for your help.

https://preview.webflow.com/preview/sandbox-0bc4ff?preview=fbf329dd08b1efefe6453073ec77e355


#5

Hi @lorentracy,

Is it perhaps something like this that you’re looking for?

http://hover-only-button.webflow.io/
https://preview.webflow.com/preview/hover-only-button?preview=538fbf6f1ba4c91662eae6fc5dce47e4

This puts a wrapper around a button bg and button txt, so the bg can scale independently from the text. It doesn’t use a border.


#6

Yeah that works perfectly. What does the wrapper do to enable them to scale independently from each other?


#7

Glad that worked for you.

The difference is the nesting of objects. In your case, the text is nested within the blue button, so it’s a child of it. When you affect the parent, you affect the child as well. To keep the two independent, you make them sibling to one another, and I used flex positioning to make the text center on top of the button bg. Then I wrapped both in another div and applied an interaction to the wrapper, and had the animation target the background only. This would cause the bg to animate independently from the text.

I also added a padding on the wrapper so that the text would keep still while the bg grew. Without it, when the button bg grew, it would cause the text to shift around unintentionally as the wrapper box expanded to accommodate for the growing button bg.

Hope that explanation helps!


#8

That makes perfect sense. Thanks for the help!


#9

So would I be wrong to say that the downfall of this method is that the button background can no longer be dynamically sized by the text? Could you use this method for a site wide reusable button without having to adjust each button’s width manually to accommodate different lengths of text?


#10

Good question @lorentracy.

I’ve adjusted the button designs to accommodate for the size of the text within. Check the webflow site I published to see the change.

This solution has a padding on the wrapper and the bg goes to 100% width/height to fill the wrapper + the width/height of the text element within. The interaction and the buttons can be replicated with nothing breaking - unless you want unique styling on the bg of the button. Adding a combo style would break the link to the interaction, as I’ve experienced and outlined extensively in another forum thread today:

As long as you keep things the same between all buttons, OR you don’t mind making new animations for unique buttons, you should be fine.


#11

@lorentracy I think I found a glitchy workaround to unique styling!

The three buttons were working and I decided to try to break the interaction to one of the buttons by adding an extra combo class to one of the buttons to make it black instead:
image
And I tried the animation and it WORKS.

So my theory behind this loophole is that you can add customization after you have set up the interaction, because the animations will refer to all instances of [blue button bg][flexi], regardless if it has additional combos added to it.

This might solve my other problem that I have on the other thread so I’m really excited now :heart_eyes:


#12

Awesome, well thanks for figuring that all out. Good stuff!