[Resolved] Button: Transparent text on hover

Home Forums Support [Resolved] Button: Transparent text on hover

Home Forums Support Button: Transparent text on hover

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
  • #1611586

    Hi i’m trying to build a landing page similar to linktree. How do you get a transparent text hover effect like they have? Right now when I hover, the background color takes over everything, so when i set the text to transparent, it is all white and the text doesn’t show.

    Here’s my CSS right now:
    .button.ghost, .button.ghost:visited {
    background: transparent;
    border: 2px solid #FFF;
    .button.ghost:active {
    background: #fff;
    color: transparent;
    border: 2px solid transparent;

    Customer Support

    Hi there,

    Any chance you are using the block editor?


    I am using GenerateBlocks. is this what you are referring to?

    Customer Support

    Hi there,

    you can do that with a GB Buttons Block.
    Make sure to give the button a border width in the Spacing options.
    For the Normal Colors you want:
    Background: transparent;
    Color: #fff;
    Border: #fff;

    For the hover;
    Background: #fff;
    Border: Unchanged
    Color: Set this to the color of your container background…. you can’t use transparent as this will only show the button backgrounds color.


    If my background is a gradient or picture, how do I make the text color that same color?

    Is there no way to make it transparent?

    Customer Support

    Hi Ryan,

    Unfortunately I don’t think it can be done with GB or other block editors, and even the example site you showed to us, the hover text color is not transparent.

    As you can see in the screenshot below, when I push the button down to a lighter colored background area, the text hover color stays blue.

    You could try to use a color which is similar to the background color where the button is located, just like the example site does.

    Let me know ๐Ÿ™‚


    I’m blind–nice catch. thanks

    Customer Support

    Haha no problem ๐Ÿ™‚
    It was hard to tell without pushing the button down.


    I have a number of “linktree” style pages to setup under seperate domains.

    Is there a simple site design template that I can use? Or what do you suggest?

    I have done one here on http://redmiller.org from the “what i do” blog template but I don’t want to do that for every one I set up. And there’s still some things I cant work out how to delete or turn of like the side menu??


    Customer Support

    Hi Ross,

    To disable the primary navigation, go to customizer > layout > primary navigation, set a high value for mobile break point, choose No Navigation as Navigation Location.

    For a page simple like that, I don’t think any site template is needed, you can build from scratch.

    If you need further assistance, please open a new topic, we can discuss it there.

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