# 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.

- Type: CSS
- Runs: Site-wide header
- Category: [Frontend & Design](https://wpide.com/library/category/frontend/)
- Tags: menus, buttons, cta, css
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/frontend-menu-button-class/

## Code

```css
.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 use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Turn a Menu Item Into a Button" in its snippet library and add it in one click; or create a new CSS snippet in WPIDE (or any code snippets plugin) and paste the code above. More snippets: https://wpide.com/library/