[Resolved] Button: Transparent text on hover

[Ryan]

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:hover,
.button.ghost:active {
background: #fff;
color: transparent;
border: 2px solid transparent;
}

[Leo]

Hi there,

Any chance you are using the block editor?

[Ryan]

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

[David]

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.

[Ryan]

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?

[Ying]

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.
https://www.screencast.com/t/CAWTWopAxj

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 🙂

[Ryan]

I’m blind–nice catch. thanks

[Ying]

Haha no problem 🙂
It was hard to tell without pushing the button down.

[Ross]

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??

thanks

[Ying]

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.
https://www.screencast.com/t/XrWcqAaG

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.

[Author]

Posts