It seems the issue is from the Simple Custom CSS and JS plugin. You have a script from that plugin that has this code:
.wp-element-button, .wp-block-button__link {
background-color: #fff;
border: 1px solid #333;
padding: 7px;
}
<!-- start Simple Custom CSS and JS -->
<style>
[...]
.wp-element-button, .wp-block-button__link {
background-color: #fff;
border: 1px solid #333;
padding: 7px;
}
This code modifies the background-color property of the button, making it white, which is the same color as the text of the button. Try to locate this section and either remove the background-color property or add a color property that contrasts with the button.
Kind regards,
Jair.
The button only looks empty because the text to be displayed is the same color as the background. The reason for this is a custom CSS that affects all buttons.
You have stored the following as custom CSS in the “Simple Custom CSS and JS” plugin:
.wp-element-button, .wp-block-button__link{
background-color:#fff;
border:1px solid #333;
padding: 7px;
}
This makes the background of the button white. But so is the text. The solution would be quite simple:
.wp-element-button, .wp-block-button__link{
background-color:#fff;
border:1px solid #333;
color: #000;
padding: 7px;
}
This makes the button text black and therefore readable again.
Very strange because no changes in CSS in about 2 years and it was fine up till recently
It may be that the font color for buttons in your theme has changed. Since you are using a block theme, you can find the setting for this under Appearance > Editor > Styles > Blocks > Buttons. Perhaps this has changed due to an update, or because you wanted to change the color of a button elsewhere.
The button is now easy to read again. If the issue has been resolved for you, feel free to mark it as solved.
But that of course worked. Thanks
