Couldn't Overiding CSS rule

I am trying to set my button color always white on hover like this:
Screenshot 2024-05-01 at 13.43.12

As you can see it is being overridden by .link-primary

I noticed that it is because of text option setup:
Screenshot 2024-05-01 at 13.43.41

My question is: How could I set my button to be white on hover while keeping the option setting for text is primary?

OK Solution found:

add !important after white and it works

Screenshot 2024-05-01 at 14.13.36

If you want to change the Primary color throughout your website, (along with the hover and other pseudo classes associated with it) you should copy the necessary Bootstrap classes to a custom CSS file and change the rules there.

Doing it through the Appearance >Font settings will create inline CSS that is applied to that component only.

Generally speaking, with web design, it’s best to avoid inline CSS and using the !important declaration as much as possible. They’re fine for temporary things, but for the fundamental look and feel of the website, it’s best to create new CSS.

1 Like