[Resolved] Make all buttons Ghost buttons

[Morgan]

So, I’m confused – I want all buttons to be ghost buttons, I had this working (at least in most places), but now, even when using styles from devtools (which worked live) and then adding those additional classes, even with !important it isn’t working.

Before I could’ve sworn this was all I needed for it to work sitewide:

/* _buttons ghost */
.button, .button:visited,  {
  background: transparent !important;
  border: 2px solid #FF4304 !important;} 
.button:hover, .button:active 
{ background: #FF4304 !important;
color: #fff !important; }	

I then added, as it worked in devtools

button, html input[type="button"], input[type="reset"], input[type="submit"], a.button, a.wp-block-button__link:not(.has-background){
  background: transparent !important;
  border: 2px solid #FF4304 !important;} 

And it’s now not working. My workflow is to hack in devtools (where the above appeared and worked fine), then add css to Customizer and tweak until I go live, yet now nothing seems to be showing live in Customizer or after “publish” (but it did in devtools).

To clarify: I’m not talking custom html/css as per GB buttons as in my template, I’m talking making all unstyled buttons, anywhere on my site, be styled as ghost buttons.

[David]

Hi there,

try this:

button,
html input[type="button"],
input[type="reset"],
input[type="submit"],
a.button,
a.wp-block-button__link:not(.has-background),
.happyforms-styles input[type="submit"]:not(:hover):not(:active):not(.has-background) {
  background: transparent !important;
  border: 2px solid #FF4304 !important;
  color: #FF4304 !important;
}

button:hover,
html input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover,
a.button:hover,
a.wp-block-button__link:not(.has-background):hover,
.happyforms-styles input[type="submit"]:not(:hover):not(:active):not(.has-background):hover {
  background: #FF4304 !important;
  color: #fff !important; 
}

It should cover them all including the contact form in the sidebar

[Morgan]

Hi, thanks, I replaced mine with your code in customizer, but again – no change.

[Morgan]

Placing at top of CSS got it to work, go figure (tried bottom before, which didn’t work).
Thanks 🙂

[David]

Glad to hear that.

That generally means you have some ‘broken’ CSS in there – might be a missing } on a CSS Rule or @media query or a busted comment.

You can use the CSS Validator ( By direct Input – copy and paste your code in ) to check for issues.

https://jigsaw.w3.org/css-validator/

[Morgan]

Wow, that was exactly it, twice missing } on last of my custom classes, at bottom.

You’re a scholar and a gentleman – thank you!

[David]

Glad to be of help!

[Morgan]

Ug, David, only just realised that that CSS made all the mobile .menu-toggle have the border too, and adding any of the following didn’t help:

:not(button.menu-toggle)
:not(.menu-toggle)
:not(.primary-menu)
:not(.gp-icon)

Help?

[Elvin]

Hi there,

Are you trying to exempt the mentioned button from this CSS?

button,
html input[type="button"],
input[type="reset"],
input[type="submit"],
a.button,
a.wp-block-button__link:not(.has-background),
.happyforms-styles input[type="submit"]:not(:hover):not(:active):not(.has-background) {
  background: transparent !important;
  border: 2px solid #FF4304 !important;
  color: #FF4304 !important;
}

If so, it’s the button selector you have to apply your pseudo class on.

example:

button:not(.menu-toggle),
html input[type="button"],
input[type="reset"],
input[type="submit"],
a.button,
a.wp-block-button__link:not(.has-background),
.happyforms-styles input[type="submit"]:not(:hover):not(:active):not(.has-background) {
  background: transparent !important;
  border: 2px solid #FF4304 !important;
  color: #FF4304 !important;
}

Or if you want to exclude multiple classes, you can add more :not() like this:

button:not(.menu-toggle):not(.your-class-1):not(.your-class-2)

[Morgan]

Great stuff, that’s the one.

But, as the old saying goes “Whack one mole and another one takes its place”, or something.

I actually had the close toggle menu “X” overlaid perfectly over the hamburger (otherwise with my semi-transparent mobile overlay shows 2 x “X”), and this seems to have broken it (maybe?).

To recap: make sure there’s only one X (the one that the Hamburger turns into) on mobile menu off-canvas overlay.

EDIT: Had a think, a search, and thought the simplest fix might be to hide .gp-icon.pro-close { display: none;} – works, done and dusted, and then, say: .menu-toggle {z-index: 100000000000000000000000 !important;} – but it still doesn’t appear over the off-canvas mobile overlay, and I don’t know why 😐 – might any of you? Also, would this work?

[Elvin]

Not exactly sure how you want it to appear.

z-index won’t work for the close button outside of the offcanvas menu if it’s active because the off-canvas container parent has a higher z-index over the parent element of the close button outside of it.

Can you provide any mockup images of how you want it to appear when the slideout menu is active?

Not exactly sure if this is what you prefer but try this CSS:

button.menu-toggle[aria-expanded="true"] span.gp-icon svg:nth-child(2) { visibility: hidden; }

.slideout-navigation.do-overlay button.slideout-exit.has-svg-icon {
    position: absolute;
    top: 0;
}

Here’s how it would behave: https://share.getcloudapp.com/9Zuxx6Jv

[Morgan]

Well, considering you weren’t even sure what I meant – this was it! Nailed it! Perfect!

Here’s how it would behave: https://share.getcloudapp.com/9Zuxx6Jv

Yep, exactly as intended

Thanks so much!

(As an aside – My 2c – this should be considered for replacing the default behaviour).

[Elvin]

Glad you got it sorted. No problem. 😀

[Author]

Posts