Turn a Menu Item Into a Button
Styles any menu item with the CSS class "menu-button" as a solid call-to-action button, in classic theme menus and the Navigation block.
Opens WPIDE on
Code
.menu-item.menu-button > a,
.wp-block-navigation-item.menu-button > .wp-block-navigation-item__content {
display: inline-block;
padding: 0.55em 1.2em !important;
border-radius: 999px;
background: #111827;
color: #ffffff !important;
font-weight: 600;
line-height: 1.2;
text-decoration: none;
transition: background-color 0.15s ease;
}
.menu-item.menu-button > a:hover,
.menu-item.menu-button > a:focus-visible,
.wp-block-navigation-item.menu-button > .wp-block-navigation-item__content:hover,
.wp-block-navigation-item.menu-button > .wp-block-navigation-item__content:focus-visible {
background: #374151;
}Notes
Add menu-button to the item's CSS Classes (Appearance > Menus, enable it in Screen Options) or to a Navigation link block's Additional CSS class. Change the colors here.
How to add this snippet
- Install WPIDE on your WordPress site (it is free) and open Code Snippets.
- Use snippet above adds it from the library in one click. Or copy the code into a new snippet with the same code type.
- It is added inactive: review the code and settings, then switch it on.