How to Turn a Menu Item into a Button on any WordPress Theme

Do the WordPress menu items on your site appear to be just links? A standard menu item mostly fails to make visitors click it. It’s time to elevate your website’s design with the power of buttons. Buttons have a direct interaction, they convey a clear call to action, making it obvious to users what action they can take.

Unfortunately, not every WordPress theme has a header builder that allows us to add a button to a header as a navigation menu.

In this tutorial, we’ll walk you through a straightforward method to convert any menu item into a visually striking button, regardless of your theme, and without the help of any WordPress plugin. This method has two easy steps; adding a CSS class and custom CSS. So, even if you are new to WordPress and unfamiliar with coding, it will seem simple to you.

How to Turn a Menu Item into a Button on any WordPress Theme

Before we start the tutorial, we would like to inform you that we need the help of the WordPress theme customizer in this tutorial.

So, if you use a block theme, you may need to enable the theme customizer first. We have a separate post covering how to enable a theme customizer on a block theme you may want to read.

Step 1: Add the CSS Class to the Menu Item

Alright, we will start by adding a CSS class to the menu item. Go to the menus settings screen, you can access it by navigating from your dashboard to Appearance -> Menus.

Once you enter the menus settings screen, select the menu item(s) you want to turn into the buttons, then go to the Navigation Label by clicking the drop-down button.

Next, we are going to start editing the navigation label to add the CSS class by using <span tag. HTML <span is an inline container used to mark up a part of a text, it doesn’t inherently represent anything but can be styled with custom CSS.

To add a CSS class to a <span tag, you need to use the class attribute within the tag and assign it the name of the CSS class you want to apply.

In this example, we set button-menu-item as the name of our CSS class. So, our navigation label will be like this:

<span class="button-menu-item">Flash Sale</span>

Step 2: Add the Custom CSS

Next, we will add the CSS snippet to the WordPress theme customizer. On your WordPress dashboard, navigate to Appearance -> Customize.

Once you enter the customization settings, go to the Additional CSS block and click on it. Copy the simple CSS snippet below and paste it into the Additional CSS field.

.button-menu-item {
    background-color: #fc0303;
    padding: 4PX 8PX;
    border-style: solid;
    border-width: 2px;
    border-color: #ffffff;
    border-radius: 15px;
}

.button-menu-item:hover {
    color: #000000;
    background-color: #ffd500;
}

Once you’ve added the CSS snippet, apply it by clicking the Publish button.

What did the CSS code do?

.button-menu-item

This CSS class defines the style for any menu item element with the class button-menu-item.

• background-color: #fc0303;: Set the button’s background color to a shade of red (#fc0303).
• padding: 4px 8px;: Adds spacing between the button’s content and its border. The first value (4px) is for the top and bottom, and the second (8px) is for left and right.
• border-style: solid;: Sets the button’s border style to a solid line.
• border-width: 2px;: Sets the button’s border width to 2px.
• border-color: #ffffff;: Sets the color of the button’s border to white (#ffffff).
• border-radius: 15px;: Rounds the corners of the button with a radius of 15 pixels.

.button-menu-item:hover

This CSS c class defines the style for the button when the mouse hovers over it.

• color: #000000;: Sets the text color to black (#000000) when hovered.
• background-color: #ffd500;: Changes the background color to a shade of yellow (#ffd500) on hover.

Feel free to replace the property values with your preference to achieve the best appearance of the menu item’s buttons that align with your overall design.

The Bottom Line

You may get remarkable results in terms of both design and user experience on your WordPress website by learning how to turn common menu items into visually appealing buttons.

This guide has equipped you with the essential knowledge and steps to achieve this transformation without relying on additional plugins. Let your imagination run wild as you customize the navigation of your website to properly match your brand identity and successfully engage visitors.

Keep in mind that a well-designed menu is more than just a navigational tool; it’s an opportunity to make a lasting impression.