Archived topic
Ghost Button CSS and Class
9 replies · Started by Angus on June 14, 2020
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
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 :)
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.
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.
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.
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
Style it into a ghost button?
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 :)
OK thanks guys, I'll try that 👍
No problem :)
