How to change the hover color of a button in WordPress

Changing the color of a button when someone hovers over it is one of those small details that makes a site feel finished. Until recently, the only proper way to do it in a block theme was in theme.json. That works fine as long as all your buttons look the same, but it falls short as soon as you have buttons on top of images or on different background colors, where one hover color doesn’t fit them all. Starting with WordPress 7.1, you can finally set the hover color for each button right in the editor.

In this tutorial, we’re going to take a look at how you can change the hover color of a single button, and of all the buttons on your site at once.

Changing the hover color of a single button

1. Select the Button block you want to change. If it’s part of a Buttons block, make sure you’ve selected the button itself, not the group of buttons around it.
2. Make sure that you have the “Block” tab selected in the right sidebar. Click the options menu (⋮) next to the “Button” heading, and select “Hover” under “Pseudo State”.
3. Beneath the Button block description, you’ll notice a “Show state on canvas” toggle, checked by default, as well as a little box letting you know that you have the “Hover” state selected.
4. Any changes you make to the style settings of the Button block will now be applied to the button when the visitor hovers over it. For example, you can change the text color under “Typography” → “Color”, and the background color under “Background” → “Color”. I recommend you steer clear of any settings that will change the dimensions of the button on hover, like the width or padding, since it can cause the button to slip off the cursor when the visitor hovers over it.
5. Switch the menu back to “Default” when you’re done, so you don’t accidentally change the hover styles when you meant to change the regular ones.
6. Save the post or page.

The hover colors only apply to this button. Hover over it on the front end to check that it works.

Changing the hover color of all buttons

If you want all the buttons on your site to share the same hover color, it’s better to set it once in Global Styles than to change every button separately.

1. Go to “Appearance” → “Editor” → “Styles”.
2. Click “Blocks”, and find and select “Button” in the list.
3. Open the “States” dropdown next to the “Button” heading and select “Hover”. A little “Hover” label beneath the heading lets you know that the state is selected.
4. Change the text color under “Typography” → “Color”, and the background color under “Background” → “Color”.
5. Save your changes.

Done! The new hover colors now apply to every Button block on your site, except the ones where you’ve set hover colors on the button itself. Those keep their own colors.

Other states

The menu has a few more options besides “Hover”:

• Focus: when the button has been selected with a keyboard or clicked.
• Focus-visible: when the button has been selected with a keyboard specifically. Setting a clear style here makes your site easier to use for people who navigate with a keyboard.
• Active: while the button is being clicked.

The same options are also available for the Navigation Link block, so you can change the hover color of the links in your menus the same way.

A note for theme developers

If you’re building a block theme, you can set the same hover styles in theme.json by adding a :hover key to the Button block’s styles, under styles.blocks:

"core/button": {
	":hover": {
		"color": {
			"background": "#1e2328",
			"text": "#ffffff"
		}
	}
}

It also works together with the responsive styles in WordPress 7.1, so you can give buttons a different hover color on mobile.