How to Add a Button in Navigation Menu Of WordPress

Do you want to Know how to add a Call to action Button in the WordPress Navigation, then follow this article.

As you know there is no direct way to add button in the navigation menu in most of the WordPress themes. So, Either you can use a plugin for this or use custom CSS to achieve this.

I don’t recommend you should use a plugin for a simple task like this. You can easily add button in WordPress Menu by following this article.

Steps to Add Button in WordPress Menu

In the WordPress dashboard, go to Appearance > Menus.

Select the menu to which you want to add the button.

Click on Custom Links. Here, you will need to input the URL for the link and the link text which will appear as the button’s label.

Click Add to Menu.

In the menu item settings (still under Appearance > Menus), click on the newly added custom link to expand its options.

If you do not see an option to add a CSS class, click on Screen Options at the top right of the screen and check the CSS Classes option.

Add a custom CSS class to the menu item (e.g., menu-button).

Navigate to Appearance > Customize > Additional CSS. Add custom CSS to style the link as a button. Here’s an example of CSS you might use:

#primary-menu .menu-button a {
    padding: 15px 20px;
    background: #da394a;
    color: #fff;
    font-weight: 700;
    font-size: 18px;
    border-radius: 8px;
    width: fit-content;
    border: 1px solid #da394a;
    line-height: 1;
    margin-left: 20px;
    transition: all .2s ease-in-out;
    font-family: open sans, sans-serif;
}

#primary-menu .menu-button a:hover {
    background-color: #E14D43;
    transform: scale(1.1);
}

This CSS will style the link to look like a button with a red background and slightly rounded corners. You can customize the colors, padding, and other properties according to your site’s design.

Note: If you want Round button then you can make this border-radius: 40px; instead of 8px given above.

After adding the CSS, save your changes by clicking Publish in the Customizer. Then, visit your site to see the new button in your navigation menu.

This method allows you to add a stylized link to your WordPress menu that functions visually as a button, enhancing the navigation experience without the need for additional plugins.

Benefits of Adding a Button in Navigation Menu

A button in the navigation menu stands out from regular links, drawing attention to important actions you want users to take, such as signing up, booking a service, or contacting the business. This can lead to higher conversion rates.

Buttons are more interactive and visually appealing than text links, which can encourage users to click and engage with your site more effectively.

Buttons can be styled differently from the rest of the menu, which helps to break the monotony of the design and adds a touch of style to your website’s overall look.

Conclusion

I hope you have learned how to Add a button in WordPress Menu by following this article.

If you have any doubt, You can ask in the comment section, I will try to help you ASAP. Don’t forget to share this trick to others.