Do you want to make your WordPress website look more professional and increase clicks from visitors?
One of the easiest ways to improve your website navigation and conversion rate is by adding a button inside your WordPress header menu.
Many website owners want buttons like:
- Contact Us
- Get Started
- Book Now
- Login
- Free Trial
- Shop Now
But most tutorials recommend heavy plugins that slow down websites.
The good news?
You can easily add a WordPress Header Button without using any plugin.
In this beginner-friendly guide, you’ll learn:
- How to Add Button in Header Menu
- How to style menu items as buttons
- How to make buttons mobile responsive
- How to customize colors and hover effects
- Advanced optimization tips for better conversions
By the end of this tutorial, your website header will look cleaner, more modern, and more clickable.
Quick Answer
To add a button in the WordPress header menu without a plugin:
- Go to Appearance → Menus
- Add a custom menu link
- Open Screen Options and enable CSS Classes
- Add a custom CSS class to the menu item
- Paste custom CSS into Appearance → Customize → Additional CSS
- Save changes
Your menu item will now appear as a stylish button.
Beginner Friendly Guide
Why Add a Button in the WordPress Header?
Your header menu is one of the most visible parts of your website.
A call-to-action button helps users take important actions quickly.
Benefits of a Header Button
- Increases click-through rate
- Improves user navigation
- Makes website look professional
- Highlights important pages
- Boosts conversions and sales
- Improves user experience
For example:
An eCommerce website may use:
- Shop Now
- Buy Now
- View Products
A service website may use:
- Book Appointment
- Contact Us
- Get Quote
A blog may use:
- Subscribe
- Join Newsletter
- Watch Videos
Step 1 — Open WordPress Menu Settings
First, log in to your WordPress dashboard.
Then go to:
Appearance → Menus
Here you’ll see your website navigation menu.
Choose the menu you want to edit.
Usually this is:
- Primary Menu
- Main Menu
- Header Menu
Step 2 — Add a New Menu Item
Now add the page or custom link you want to turn into a button.
Example:
- Contact Page
- Pricing Page
- WhatsApp Link
- Login Page
Click:
Add to Menu
Then drag the menu item into the correct position.
Most websites place the CTA button at the far right side of the menu.
Step 3 — Enable CSS Classes
This step is very important.
At the top-right corner of the WordPress dashboard, click:
Screen Options
Then enable:
✔ CSS Classes
Now WordPress will allow you to add custom classes to menu items.
Step 4 — Add a CSS Class
Expand the menu item you want to turn into a button.
Inside the CSS Classes field, enter:
button-menu
Then click:
Save Menu
Step 5 — Add Custom CSS
Now go to:
Appearance → Customize → Additional CSS
Paste this code:
.button-menua {
background: #0073ff;
color: #ffffff!important;
padding: 12px20px;
border-radius: 6px;
font-weight: 600;
transition: 0.3sease;
}
.button-menua:hover {
background: #0056c9;
color: #ffffff!important;
}
Click Publish.
Now your menu item will appear as a professional button.