Adding a Menu Button

How to add a callout/highlight menu item button to your menu.

Adding a menu button is even easier than adding a search menu icon. Simply add a class of “button” without quotes to the CSS Classes field of any menu item. Other button styles may be added with "button button-secondary", "button button-outline" or "button button-link".

When setup correctly, your menu item should look like this:

If you don’t see the CSS Classes field, here is how to make sure it’s enabled in WordPress, via Dashboard > Appearance > Menus:

If you'd like to customize the button styles with CSS, you can target them like this:

.menu-item-link.button {
	--button-background: black;
	--button-color: white;
	--button-background-hover: red;
	--button-color-hover: white;
	--button-border: 0;
}