GenerateBlocks Button: How to apply bold for the button text on hover?

Hi Sascha,

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

You'll need custom CSS of this.

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

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.