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

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

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

  • This topic has 3 replies, 3 voices, and was last updated 2 years ago by David.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #2167417
    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

    #2167499
    Ying
    Staff
    Customer Support

    Hi Sascha,

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

    You’ll need custom CSS of this.

    #2168704
    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

    #2168951
    David
    Staff
    Customer Support

    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.

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.