[Support request] Make all buttons Ghost buttons

Home Forums Support Make all buttons Ghost buttons

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #1722881
    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.

    #1723166
    David
    Staff
    Customer Support

    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

    #1724001
    Morgan

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

    #1726170
    Morgan

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

    #1726410
    David
    Staff
    Customer Support

    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/

    #1729601
    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!

    #1729690
    David
    Staff
    Customer Support
Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.