Gutenberg button styling cannot be overwritten by CSS

  • Resolved Conor

    (@jrocbaby)


    10 months ago

    Hi WordPress community, I’ve run into a problem trying to stylize buttons and I’m wondering if it’s something that anyone else has encountered.

    I’m trying to stylize the buttons on the website https://startrite-reconditioned.co.uk but i’m having a little trouble. So far i’ve successfully implemented the following CSS which is working as intended:

    .header-button-work {
    width: 200px;
    font-size: 30px;
    padding-top: 0.5em;
    .span {display: inline;}
    }

    However I’d like the border color to be different. border color for these buttons seems to be controlled by text color. Unfortunately it seems that any CSS that i’m using to try and change the text or border color isnt working. I have tried using the ‘border-color’ and ‘color’ commands, including using the !important command but no luck, it seems that for whatever reason the button text color takes precedent.

    I have even cleared the text color for the button styling and tried again, but unfortunately the themes text color then takes over, which it seems cannot be cleared like the button text color value.

    Am I missing something obvious?

    Conor

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)
  • Justin Tadlock

    (@greenshady)

    10 months ago

    You need to target the button inside of the <div> with the .header-button-work class. Here’s an example of changing the button’s border color to red:

    .header-button-work .wp-element-button {
    border-color: red;
}
    Thread Starter Conor

    (@jrocbaby)

    10 months ago

    Amazing! works thanks Justin ,

    Why is it that targeting the button with .header-just-work didnt work, but using both the classes in your code did?

    is the class .wp-element-button a default class for all wordpress buttons?

    Kind Regards,
    Conor

    Justin Tadlock

    (@greenshady)

    10 months ago

    Why is it that targeting the button with .header-just-work didnt work, but using both the classes in your code did?

    .header-button-work is not a class for the buttons. It’s a <div> that’s wrapping the buttons. The buttons are <a> elements that sit within that <div>.

    So the best way to style those buttons is to reference the outer wrapper (.header-button-work) and the inner button (.wp-element-button).

    is the class .wp-element-button a default class for all wordpress buttons?

    Yes. It’s the standard class that should be added to button and button-like elements.

    Thread Starter Conor

    (@jrocbaby)

    10 months ago

    Top man, thanks for your time helping me with this

    Conor

    Thread Starter Conor

    (@jrocbaby)

    10 months ago

    Sorted

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Gutenberg button styling cannot be overwritten by CSS’ is closed to new replies.