[Resolved] I need to make the text button to be “transparent”

[Marcel]

Hello!

I know that my request sounds weird, but I need to set the colour of the text button to be ‘transparent” (so, do not be visible) in normal mode, and only to become visible (doesn’t matter the colour) when hovering the button.
Would it be possible to accomplish this in any way?
Thank you!

[David]

Hi there,

which particular button ? Are these the theme buttons ? Might be worth sharing a link where i can see them.

[Marcel]

This is the button: https://www.screencast.com/t/J4zdbbT5ljO
I have updated the website page address in the private information area.

[Ying]

Hi Marcel,

You can set the button’s background color to transparent by adjust the opacity to 0. Then add this CSS:

.gb-button-wrapper a.gb-button-f84b9ed2, .gb-button-wrapper a.gb-button-f84b9ed2:visited {
    color: transparent;
    background-color:transparent;
}

Let me know 🙂

[Marcel]

Hi, Ying

Thank you very much. The trick (the CSS code snippet you provided me) did the job perfectly!
One more question: When I try to insert a single GenerateBlocks button, in the editor view I see two buttons, even I added just one: https://www.screencast.com/t/mAI2bQ26u9o8
Is it normal behaviour? Because I remember in the past I have seen just one. Maybe I am wrong?

[Ying]

It’s completely normal.

The upper one is a buttons wrap, and the lower one is the button itself.

You can add more buttons under the same buttons wrap, and set alignment/stack ways, etc for the buttons as well.

[Marcel]

Thank you very much!

And here is the last Q related to the transparency of the button’s background color:

1. in the first instance the button is transparent (and invisible) – as I want
2. when hovering the button, I can see the button – as I want
3. after clicking the button and being redirected to a specific URL, the button stays visible. – What I need is that after clicking, the button to be again invisible.. Would it be possible with CSS?
Here is a short recording with the actual behaviour: https://www.screencast.com/t/pga8MbW9qu6f

[Ying]

Edited CSS here, let me know how it works 🙂
https://generatepress.com/forums/topic/i-need-to-make-the-text-button-to-be-transparent/#post-1720298

[Marcel]

Thank you, David and Ying!

[Author]

Posts