Buttons block: add behavior settings on hover

[tanjoymor]

What

Can we add options for the Buttons block to control the "hover" state of the button? Such as being able to control the text and background-color?

Why

A simple setting like this shouldn't need custom CSS to resolve. Some themes include a default hover effect (which might not align with brand colors), others don't have one at all.

How

This CSS was written for the Outline variation as an example:

.wp-block-button.is-style-outline>.wp-block-button__link:not(.has-background):hover {
background-color: transparent;
color: red;
border-color: red;
}

PGREE4y7jbrUIMrA54jveLOZ4Jm9p1uMw79e6Voc.mp4

[mrfoxtalbot]

Thank you for the report. I agree that this should be fixed and it should be fixed in core:

• Button blocks have no default interaction states and per block element rules aren't applied WordPress/gutenberg#48965
• Button: Add support for :hover in variation theme.json WordPress/gutenberg#55359