CSS Specificity of Box <a> tag styles overrides Button's text color, when placed in a Box

[patrickbrown-io]

Conflicting styles with Box's <a> style specificity: (0,5,1):

.ucb-box.ucb-box-theme-lightgray.ucb-box-style-fill a:visited:not(:hover,:active,:focus) {
    color: #01579B;
}

and Buttons specificity: (0,2,0)

.ucb-link-button.ucb-link-button-blue {
    color: #fff; # Gets overwritten
    background-color: #0277BD;
}

Results in Button text color getting overwritten, as shown (light grey box with Blue Buttons, text should be white):

Seems like you can just add color: #fff !important to the Button styles. Will need to test as this affects pages like the Issue where they build a menu in the body out of the Box and Button, and Icon plugins

[patrickbrown-io]

Should also check other plugins, might affect Link and Button Group

[timurtripp]

!important is a workable solution to override styles from box or other places. I also noticed text color issues for buttons placed in the site contact info footer block.

[timurtripp]

You can also try adding :link and :visited to button text color styles if you want to avoid adding !important (I generally try to avoid it when possible).