WordPress 7.1 adds a way to style what happens when a visitor hovers over or clicks a button, directly in the block editor. Until now, changing a button’s color on hover meant writing custom CSS or hiring someone who could. That’s no longer required.
What you can now control
The new “states” cover four moments: hover (mouse over), focus (selected via keyboard), focus-visible (a more precise keyboard-only focus), and active (the moment it’s clicked). You can set a different background color, text color, or other style for each one.
For now, this only works on two block types: the Button block and the Navigation Link block used in menus.
Where to find it
Go to Appearance > Editor > Styles > Blocks, pick Button or Navigation Link, and look for a States dropdown near the top of the style panel. Choose a state, then style it like you would the block’s normal look. The same option is also available on an individual button through the block’s own settings sidebar, if you only want to change one button rather than every button on your site.
Why this matters
A hover effect on buttons is one of the most common small requests site owners make to a developer, just to make a “Buy Now” or “Contact Us” button feel more responsive to a click. Now it’s a dropdown and a color picker away. If you’re already testing WordPress 7.1 ahead of its August 19 release, this is one of the changes worth trying on a staging site first, since it currently only reaches the two block types listed above.
End of article