Hi.
For the Twenty Twenty-One theme, under Customizer > Colors & Dark Mode, Twentig adds options to change the colors of the default buttons globally. However, if you change the color or a specific button block, the hover color reverts to the default (this is how Twenty Twenty-One designed the buttons). To override it, you can create a custom CSS class. The example below shows how to create a custom-button class that will be applied to a button block:
First add the following CSS in the Customizer > Additional CSS:
.wp-block-button.custom-button .wp-block-button__link:hover,
.wp-block-button.custom-button .wp-block-button__link:active,
.wp-block-button.custom-button .wp-block-button__link:focus {
background: #ff0000 !important;
color: #fff !important;
border-color: transparent !important;
}
Then in the block editor, select your button block, open the settings sidebar, and type custom-button in the Additional CSS Class(es) field under the Advanced panel.
Replace the color values as you like.
I hope the above is useful to you.
Tom
