Change button size but not text on hover

[renutrition]

Hey there! I would like to slightly increase the button size upon hovering while keeping the text size the same. Here is an example:

https://www.smartpassiveincome.com (green CTA button - LEARN MORE)

Is there a simple way to do this with css? Or better yet, within the builder?

Thanks!

[ruenel]

Hello @reNutrition,

Thanks for writing in!

To accomplish what you have in mind in the builder, simply edit your button settings and do the following:

• Set the border radius to 0
• Make sure the shadow is disabled
• And set your border colors. White for the base and the same color as the button background for the interaction.

We would love to know if this has worked for you. Thank you.

[renutrition]

Thanks @RueNel,

I’m looking for more of a smooth transition, as if the button is growing steadily instead of abruptly. Any way to use pixels to do it? Or with css?

[christian]

Hey @renutrition,

That effect, though looks simple, requires complex CSS. There’s a small amount of CSS code I can offer though this will also resize the text. Try adding this code in the Button’s Element CSS.

$el:hover {
    transform: scale(1.2)
}

If you wish to exactly replicate the effect in your sample site, please consult with a third-party developer.

Thanks.

[renutrition]

@christian_y I figured it requires a bit more than a few lines of code…I’ve been scouring css sites to see if others have found solutions, and haven’t had much luck. I’ve only done minor manual code changes haha.

Thanks for your perspective! I appreciate you taking the time.

[rad]

You’re most welcome!