Do you want to add a button in your WordPress header menu?
Adding a button in the header navigation menu can make your call to action stand out. This can drive more visitors to your site’s most important pages and create a better user experience by helping visitors take action.
In this article, we’ll show you how to easily add a button to your WordPress header menu.
Why Add a Button in WordPress Header Menu?
WordPress navigation menus are usually plain text links that all look the same. To visitors, all these links look equally important and nothing really stands out.
However, some links are more important than others. For example, you may want to add a link to an online order form, or a link to your WordPress membership site’s registration page.
By default, these important calls to action look just like the rest of the header menu.
You can make these links more noticeable by changing them into buttons. This naturally draw’s the visitor to your call to action, which can get you more clicks and conversions.
By default, you can add buttons in WordPress posts and pages using the Buttons block. However, WordPress doesn’t have a built-in option to add buttons in navigation menus.
That being said, let’s see how you can add a button in your WordPress header menu without installing a plugin.
Video Tutorial
If you’d prefer written instructions, just keep reading.
Adding a Button in Your WordPress Header Menu
To start, you need to add the link that you want to turn into a button.
Simply go to the Appearance » Menus page in your WordPress dashboard and add the link to your navigation menu. For detailed instructions, please see our guide on how to add a navigation menu in WordPress.
After that, you need to click on the Screen Options button at the top of the screen.
This will reveal a new panel with lots of new options. Simply check the box next to the ‘CSS Classes’ option.
Now, click to expand the menu item that you want to turn into a button.
You’ll notice a new CSS class option where you can enter a class name. You can call the CSS class any unique name you want, but for the sake of this guide we’ll call it menu-button.
After typing in a name, click on the ‘Save Menu’ button to store your changes.
Now you’ve added a custom CSS class to the menu item, you can change how it looks using custom CSS code.
Simply go to Appearance » Customize to open the WordPress theme customizer. You’ll see a preview of your site on the right and a bunch of theme settings in the left-hand column.
To start, click on the ‘Additional CSS’ option.
You will now see a box where you can add custom CSS code.
You can use the following CSS as a starting point:
<pre class="wp-block-syntaxhighlighter-code">
.menu-button {
background-color:#eb5e28;
border:1px;
border-radius:3px;
-webkit-box-shadow:1px 1px 0px 0px #2f2f2f;
-moz-box-shadow:1px 1px 0px 0px #2f2f2f;
box-shadow:1px 1px 0px 0px #2f2f2f;
}
.menu-button a, .menu-button a:hover, .menu-button a:active {
color:#fff !important;
}
<div class="wpcode-syntax-footer">
<div class="wpcode-syntax-code-footer-left">Hosted with ❤️ by <strong><a href="https://wpcode.com" target="_blank">WPCode</a></strong></div>
<div class="wpcode-syntax-code-footer-right">
<svg width="65" height="16" viewBox="0 0 65 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M38.0415 7.99972C38.0415 6.44437 38.4062 5.38018 39.128 4.59879C39.8499 3.80995 40.8769 3.42297 42.1941 3.42297C42.8117 3.42297 43.4071 3.54949 43.9206 3.80251C44.4564 4.05553 44.8582 4.39786 45.1782 4.82204C45.2452 4.9039 45.2601 4.99321 45.2601 5.09739C45.2601 5.2239 45.2155 5.31321 45.1336 5.39507C45.0517 5.47693 44.9624 5.52158 44.8359 5.52158C44.6871 5.52158 44.5829 5.4546 44.4936 5.35042C44.2555 5.03042 43.9429 4.75507 43.5113 4.53925C43.1094 4.32344 42.6555 4.21925 42.1643 4.21925C41.1224 4.21925 40.3336 4.53925 39.7755 5.17925C39.2248 5.81925 38.942 6.68995 38.942 7.96995C38.942 9.30948 39.2173 10.2025 39.7531 10.7979C40.2889 11.3932 41.0927 11.7132 42.1643 11.7132C42.6331 11.7132 43.0573 11.6313 43.4889 11.4379C43.8908 11.2444 44.2331 10.9913 44.4936 10.6267C44.5755 10.5225 44.6871 10.4555 44.8359 10.4555C44.9624 10.4555 45.0517 10.5002 45.1336 10.582C45.2155 10.6639 45.2601 10.7755 45.2601 10.8797C45.2601 10.9616 45.2378 11.0509 45.1782 11.1327C44.8806 11.5569 44.4713 11.8993 43.9206 12.1523C43.3699 12.4053 42.7894 12.5318 42.1717 12.5318C40.8322 12.5318 39.8052 12.1523 39.0982 11.4006C38.3987 10.6788 38.0415 9.59228 38.0415 7.99972Z" fill="#1F2937"></path><path d="M46.9268 11.7654C46.4356 11.237 46.1826 10.4258 46.1826 9.36164C46.1826 8.29745 46.4208 7.50862 46.9045 6.98024C47.3956 6.45187 48.0803 6.19141 48.9733 6.19141C49.8663 6.19141 50.551 6.44443 51.0422 6.98024C51.5333 7.50862 51.764 8.29745 51.764 9.36164C51.764 10.4258 51.5259 11.237 51.0422 11.7654C50.551 12.2937 49.8663 12.5765 48.9733 12.5765C48.1026 12.5765 47.418 12.3012 46.9268 11.7654ZM47.0608 9.36164C47.0608 10.9765 47.7008 11.7877 48.9808 11.7877C50.2608 11.7877 50.9008 10.9765 50.9008 9.36164C50.9008 7.74676 50.2608 6.93559 48.9808 6.93559C47.6933 6.93559 47.0608 7.76908 47.0608 9.36164Z" fill="#1F2937"></path><path d="M52.583 9.3839C52.583 7.25553 53.476 6.31786 55.2472 6.31786C55.6491 6.31786 56.0137 6.39972 56.3337 6.57088C56.6537 6.74204 56.9067 6.93553 57.0556 7.18855V3.84716C57.0556 3.72065 57.1002 3.63135 57.1821 3.54949C57.2639 3.46762 57.3532 3.42297 57.4798 3.42297C57.6063 3.42297 57.6956 3.46762 57.7774 3.54949C57.8593 3.63135 57.9039 3.72065 57.9039 3.84716V9.95693C57.9039 10.8053 57.6658 11.4453 57.1821 11.8918C56.7132 12.3383 56.0732 12.569 55.2844 12.569C54.4137 12.569 53.7291 12.2937 53.2602 11.7579C52.8137 11.2369 52.583 10.4481 52.583 9.3839ZM53.4314 9.3839C53.4314 10.9988 54.0491 11.81 55.3067 11.81C55.8425 11.81 56.2667 11.6611 56.5867 11.3411C56.9067 11.0211 57.0556 10.5746 57.0556 9.95693V8.25274C57.0332 8.23042 57.0109 8.18576 56.9886 8.12623C56.9663 8.05925 56.9067 7.97739 56.7951 7.85088C56.6909 7.72437 56.5793 7.59786 56.4528 7.48623C56.3263 7.38204 56.1551 7.29274 55.9616 7.21088C55.7458 7.12902 55.5374 7.08437 55.2993 7.08437C54.6816 7.08437 54.2351 7.27786 53.8928 7.67972C53.5802 8.08158 53.4314 8.57274 53.4314 9.3839Z" fill="#1F2937"></path><path d="M58.9312 9.36193C58.9312 8.3424 59.1693 7.55356 59.653 7.00286C60.1367 6.45216 60.8065 6.16937 61.6772 6.16937C62.0195 6.16937 62.3395 6.21402 62.5925 6.29588C62.8679 6.37774 63.106 6.48937 63.2772 6.63821C63.4484 6.78705 63.6195 6.93588 63.746 7.12937C63.8725 7.30054 63.9842 7.49402 64.0437 7.7024C64.1107 7.91821 64.1479 8.08193 64.1925 8.25309C64.2372 8.42426 64.2372 8.59542 64.2372 8.76658C64.2372 8.89309 64.2372 8.99728 64.2372 9.06426C64.2372 9.13123 64.2149 9.21309 64.1702 9.31728C64.1479 9.42147 64.0884 9.48844 63.9991 9.53309C63.9172 9.57774 63.8279 9.60007 63.7014 9.60007H59.8316C59.8316 10.2624 60.0028 10.7908 60.3674 11.1777C60.7321 11.5573 61.2232 11.7731 61.8409 11.7731C62.1832 11.7731 62.4809 11.7284 62.7116 11.6243C62.9498 11.5201 63.2028 11.3936 63.4335 11.2001C63.5153 11.1331 63.6046 11.1182 63.6716 11.1182C63.7758 11.1182 63.8651 11.1629 63.947 11.2224C64.0139 11.3043 64.0512 11.3936 64.0512 11.4977C64.0512 11.6019 64.0065 11.7136 63.9023 11.7954C63.8205 11.8773 63.6865 11.9889 63.5377 12.0931C63.3888 12.1973 63.1507 12.2866 62.8307 12.3908C62.5107 12.495 62.1684 12.5396 61.8037 12.5396C60.8884 12.5396 60.1814 12.2866 59.6902 11.7508C59.1916 11.2522 58.9312 10.4484 58.9312 9.36193ZM59.8093 8.87077H63.3888C63.3888 8.61774 63.3665 8.37961 63.307 8.17123C63.2623 7.95542 63.1805 7.76937 63.0539 7.57588C62.9274 7.3824 62.7563 7.23356 62.5181 7.12937C62.28 7.02519 62.0046 6.95821 61.6846 6.95821C61.1116 6.95821 60.68 7.12937 60.3377 7.4717C60.0251 7.80658 59.8316 8.27542 59.8093 8.87077Z" fill="#1F2937"></path><path d="M19.229 4.18977C19.229 3.97395 19.3109 3.78791 19.4671 3.63907C19.616 3.49023 19.8095 3.40837 20.0253 3.40837C20.2188 3.40837 20.3899 3.47535 20.5164 3.57954C20.643 3.68372 20.7323 3.81023 20.7695 3.94419L22.3248 9.51814L23.8355 3.96651C23.8802 3.79535 23.962 3.66884 24.1109 3.56465C24.2597 3.46047 24.4085 3.41581 24.5574 3.41581C24.7285 3.41581 24.8774 3.46047 25.0039 3.56465C25.1304 3.66884 25.242 3.79535 25.2792 3.96651L26.7899 9.51814L28.3453 3.92186C28.3899 3.79535 28.4718 3.66884 28.5983 3.55721C28.7248 3.45302 28.8737 3.38605 29.0895 3.38605C29.3053 3.38605 29.4764 3.45302 29.6253 3.60186C29.7741 3.7507 29.8411 3.92186 29.8411 4.13023C29.8411 4.21209 29.8188 4.3014 29.7964 4.36093L27.5118 11.9591C27.4671 12.1079 27.3853 12.2567 27.2364 12.3386C27.1099 12.4428 26.9611 12.4874 26.7899 12.4874C26.6188 12.4874 26.4699 12.4428 26.3434 12.3386C26.2169 12.2344 26.1276 12.1079 26.0904 11.9367L24.5574 6.4893L23.0244 11.9963C22.9797 12.1674 22.8755 12.294 22.749 12.3981C22.6225 12.5023 22.4513 12.547 22.2802 12.547C22.109 12.547 21.9602 12.5023 21.8337 12.3981C21.7071 12.294 21.5955 12.1674 21.5583 12.0186L19.2737 4.42791C19.2513 4.36093 19.229 4.27907 19.229 4.18977Z" fill="#1F2937"></path><path d="M30.9351 11.8101V4.18967C30.9351 3.97386 31.0169 3.81014 31.1509 3.6613C31.2997 3.51246 31.4932 3.4306 31.709 3.4306H34.2467C35.0802 3.4306 35.7425 3.6613 36.2485 4.13014C36.762 4.59898 37.0374 5.27618 37.0374 6.15432C37.0374 7.04735 36.7844 7.70967 36.2709 8.17851C35.7574 8.64735 35.0802 8.87805 34.269 8.87805H32.4978V11.8176C32.4978 12.0334 32.4309 12.2194 32.282 12.3683C32.1332 12.5171 31.962 12.5841 31.7239 12.5841C31.4858 12.5841 31.322 12.5022 31.1732 12.3534C31.002 12.1897 30.9351 12.0185 30.9351 11.8101ZM32.4755 7.48642H34.1202C34.5444 7.48642 34.8644 7.35991 35.1025 7.12177C35.3406 6.89107 35.4448 6.54874 35.4448 6.12456C35.4448 5.70037 35.3406 5.35805 35.1025 5.12735C34.8644 4.89665 34.5444 4.78502 34.1425 4.78502H32.4978V7.48642H32.4755V7.48642Z" fill="#1F2937"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M14.3916 15.9999H1.64367C0.720884 15.9999 -0.000976562 15.278 -0.000976562 14.3627V1.63709C-0.000976562 0.721738 0.720884 -0.00012207 1.64367 -0.00012207H14.3916C15.3069 -0.00012207 16.0362 0.721738 16.0362 1.63709V14.3627C16.0362 15.278 15.3069 15.9999 14.3916 15.9999ZM3.96553 13.0231C3.88367 13.0231 3.77205 13.0008 3.69019 12.9785C3.30321 12.8296 3.11716 12.4055 3.266 12.0185L6.61484 3.44546C6.76367 3.06592 7.18786 2.87244 7.57484 3.02127C7.96181 3.17011 8.14786 3.5943 7.99902 3.98127L4.66507 12.5543C4.56088 12.852 4.26321 13.0231 3.96553 13.0231ZM8.76554 11.9366C8.91437 12.0855 9.10786 12.1524 9.30135 12.1524C9.49484 12.1524 9.68833 12.0855 9.83716 11.9366L12.4567 9.33941C12.9255 8.87058 12.9255 8.08174 12.4567 7.6129L9.83716 4.99337C9.56181 4.69569 9.09298 4.69569 8.7953 4.99337C8.49763 5.26872 8.49763 5.73755 8.7953 6.03523L11.2065 8.46127L8.77298 10.8873C8.46042 11.1701 8.46042 11.6389 8.76554 11.9366Z" fill="#1F2937"></path></svg>
<a href="https://library.wpcode.com/use-snippet/" target="_blank">1-click Use in WordPress</a>
</div>
</div></pre>
If you used something different, then you’ll need to replace menu-button with the name of your CSS class.
The above cope snippet creates an orange button with a shadow effect.
Feel free to play around with the CSS snippet to see what different effects you can create. You can change background color, link text color, add a border, and more.
The above code snippet uses hex color codes. If you’re not sure what codes to use, then you can explore different colors using a resource such as Color Hex.
When you’re happy with how the button looks, click on ‘Publish’ to make your changes live.
We hope this article helped you learn how to add a button in your WordPress header menu. You can also go through our guide on how to create a landing page with WordPress and the best email marketing services for small businesses.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Sawyer Smith says
Hi, Implemented the css into my menu and it turned out great after some time troubleshooting. However, when my cursor hovers over the button, a wide white rectangle covers the text when cursor is hovering. How can I fix this so that nothing like this occurs during hover? Thanks.
WPBeginner Support says
It likely is due to your theme’s default hover colors. If you are using the CSS from our article then you would want to add CSS code like the following:
.menu-button:hover {
background-color:#eb5e28;
}
Admin
Nicole says
This is very helpful, thank you! I’m wondering if you can tell me how to change the color of the text on the sub-menu (dropdown from the button) only?
Thank you!
WPBeginner Support says
As each theme is different you would want to check with your theme’s support and they may have a recommendation, otherwise, you could use our guide on inspect element below for how to select the sub-menu for changing the text color.
https://www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/
Admin
Megan says
When I follow all of these steps the button doesn’t appear at all.. it just does nothing. Any idea why this might be? I copied and pasted the exact code from here!
WPBeginner Support says
Your specific theme may have CSS that would overwrite this code, if you check with your theme’s support they should be able to assist.
Admin
Gabriela says
how do you resize the button? I see it stays inline with the text
jj says
Great help thanks!
Is it possible to make the button something that links to another external site using the CSS?
Dorothy says
I really appreciate this! For the longest time, I wasn’t sure how to go about this. I was able to create a button in the nav with no problems following this. Thanks!!
Stephanie says
Thank you so much for this tutorial! I’m not a techie kind of person, and at first it didn’t work, because I was in my primary navigation menu, went to secondary and did the steps and voila! Added a little bling to my site!
WPBeginner Support says
Glad our guide was able to help
Admin