Navigation menu is one of the best spots to place a button in a website since it is very visible. In most websites, navigation menu lies on the top side of the website. This article will show you how to add a callout buton to the navigation menu in WordPress.
You need a basic CSS knowledge to add a callout button to the navigation menu of WordPress. Basically, all you need to do to add a button to the WordPress menu is add the custom CSS for the menu item you want to turn into button. Follow the steps below.
Add a Callout Button to WordPress Menu
Step 1. Add a new menu item
The first step you need to do is adding a new menu item to your existing menu. Or, you can also edit an existing item. To do so, go to Appearance -> Menus.
In this example, we will add a custom link to the menu so we select the Custom Links option. If you want to add a category, page or post to menu, you can select your option and add the item you want. Just don’t forget to click the Add to Menu button to add the item to the menu.
Step 2. Activate CSS Classes
Next, you need activate the CSS classes. To do so, scroll up to the top of the screen and click Screen Options button. Tick the CSS Classes option.
Step 3. Add CSS Class
Switch back to the new menu item you have just created on the step 1 above. Now you will see a new field called CSS Classes (optional). Add the CSS Class below to that field and save the menu by clicking the Save Menu button.
callout-button
Step 4. Add Custom CSS Code
Now it’s time to add the custom CSS for the menu item you want to turn as a button. To do so, go to Appearance -> Customize.
On the customization page, click the Additional CSS menu and add the following CSS code.
.callout-button a {
background-color: #00ff00;
padding: 7px 5px;
border-radius: 10px;
border: 1px solid #ff0000;
-webkit-transition: all 400ms;
transition: width all 400ms;
}
.callout-button a:hover {
background-color: #ff0000;
border: 1px solid #00ff00;
-webkit-transition: all 400ms;
transition: width all 400ms;
}
.callout-button a:after {
display: none !important;
}
You can edit the CSS above according to your need and taste. Click the Publish button to apply the change.
