A link to your site would be relevant to help you with this.
Your CSS code already works for individual buttons, but not completely. Write instead
.wp-block-button__link {
this one
body .wp-block-button__link {
This works well with the button for the newsletter below. But not both on the right in the sidebar. The reason is that there are some additional properties that superimpose yours. You can solve this by including their selectors in your CSS. So:
body .wp-block-button .wp-block-button__link.is-style-outline:not(.has-background), body .wp-block-button.is-style-outline > .wp-block-button__link:not (.has-background), body .wp-block-button__link {
color: #fff;
background-color: #32373c;
border-radius: 9999px;
box-shadow: none;
text-decoration: none;
padding: calc(0.667em + 2px) calc(1.333em + 2px);
font-size: 1.125em;
}
Thanks. It seems Jetpack is inserting overrides for these buttons. PRetty disappointing.
In that case, I recommend getting in touch with Jetpack’s support about this via https://jetpack.com/contact-support/?rel=support if you have any of their paid Jetpack plans or https://ww.wp.xz.cn/support/plugin/jetpack/ if you do not.
The overriding CSS, at least for background color, is from the customizer’s Additional CSS section, not JetPack. You apparently added your CSS to “classic-theme-styles-inline-css” which occurs rather early in the CSS cascade. You want your CSS to appear as late as possible in order to override all that comes before.
Add your CSS to the bottom of what’s already in the customizer’s Additional CSS section. This appears fairly late. The only CSS that’s later is WPForms specific.
If you still have difficulty applying a certain style, add the !important modifier to it. Always avoid using !important where possible, but if it’s needed, so be it.
