[Support request] GenerateBlocks Button: How to apply bold for the button text on hover?

[Sascha]

Hi

for a button block, I want to change the font from regular to bold on mouse hover. How can I achieve this?

Please let me solve this issue here, as I need all my GP & GB related tickets in one searchable place, thanks.

Thank you in advance and kind regards,
Sascha

[Ying]

Hi Sascha,

There isn’t such setting in GB to make this hover effect.

You’ll need custom CSS of this.

[Sascha]

Thanks Yin,

so I have tried to find an appropriate snippet for this, but fail to understand how exactly to apply this:

https://codepen.io/hexagoncircle/pen/WNrYPLo

Is there any chance to explain to me in baby-steps how to apply this, so that the button-text will turn bold on hover?

This is the site I need this for: https://nh-training.macbay.biz/

Thanks in advance and have a wonderful day
Sascha

[David]

Hi there,

you can use some CSS:

.gb-button-wrapper .gb-button:hover {
    font-weight: 900;
}

BUT you will see this causes reflow as the text expands which is not a particularly nice UX and could result in CLS.

An alternative would be to add a transparent stroke to the text that changes color on hover:

.gb-button-wrapper .gb-button {
    -webkit-text-stroke: 1px transparent;
}

.gb-button-wrapper .gb-button:hover {
    -webkit-text-stroke: 1px white;
}

You may want to increase the letter-space in the buttons typography settings to make the text a little clearer.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts