Gutenberg button styling cannot be overwritten by CSS

[ad_1]

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 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]

 

This site will teach you how to build a WordPress website for beginners. We will cover everything from installing WordPress to adding pages, posts, and images to your site. You will learn how to customize your site with themes and plugins, as well as how to market your site online.

Buy WordPress Transfer