Make all buttons Ghost buttons

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

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

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

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/

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

You're a scholar and a gentleman - thank you!

Glad to be of help!

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?

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)

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?

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

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).

Glad you got it sorted. No problem. :D