[Resolved] How to Add a Ghost Button?

[Downtown Spanish]

Hello.

How do I add a transparent ghost button?

This CSS is not working:

.button.ghost, .button.ghost:visited {
background: transparent;
border: 2px solid #FFF;
}
.button.ghost:hover,
.button.ghost:active {
background: #FFFFFF;
color: #222222;
border: 2px solid transparent;
}

[Leo]

Hi there,

You would need to make sure the HTML matches the suggested HTML here:
https://docs.generatepress.com/article/adding-buttons/

Or make sure to add button and ghost class to the button block you are adding.

[Downtown Spanish]

I am not familiar to HTML. How do I match or edit the HTML?

When I add a button it doesn’t ask me what class I want so I don’t see where that ghost class you refer to is.

[Leo]

Would a plugin like GenerateBlocks work better for you?

You can replicate that layout with container and buttons block much easier without any CSS.
https://generateblocks.com/

[Downtown Spanish]

Definitely. Thank you for the recommendation, Leo!

I will install it ASAP.

[Leo]

No problem 🙂

[Author]

Posts