[Resolved] Ghost Button CSS and Class

[Angus]

Hi I’m trying to add a ‘ghost button’ to one specific button only. I’ve tried adding the following to Additional CSS

.button.ghost {
    background-color: transparent;
    border: 1px solid #FFF;
    color: #222222;
}

.button.ghost:hover {
    background-color: #FFFFFF;
}

and tried giving the button the class button.ghost but no luck. I think the main CSS is overriding anything I add. I’ve also tried using .gb-button-ddcecbe5 as a class but that doesn’t work either. It’s the Get Directions button over the map image on the page.

Any assistance would be greatly appreciated…
Thanks

[Tom]

Hi there,

To use that CSS, your HTML would look like this:

<a class="button ghost" href="#">My Button</a>

Let me know if that helps or not 🙂

[Angus]

I’m using blocks, and when I edit as html I get ‘This block contains unexpected or invalid content’. Although if I ignore that and update, the button does what it should, but the warning persists.

[David]

Hi there,

why not just use a Buttons block ? Use the GenerateBlocks one and you can style it exactly how you want from the editor.

[Angus]

Hi David, the button was a GB button originally, that’s what I was having difficulty with, it adhering to the css class I gave it. But after Tom gave me the html I changed it to a html block. It seems to be working, although the positioning isn’t perfect, but I’d prefer to use a GB button.

[David]

Have you tried creating a new GB Button without adding any CSS classes to it?
You should be able to style that using the Buttons settings

[Angus]

Style it into a ghost button?

[Tom]

Yea – you can just style it to have a border and no background color – that way it will be a ghost-style button with no extra CSS/HTML 🙂

[Angus]

OK thanks guys, I’ll try that 👍

[Tom]

No problem 🙂

[Author]

Posts