How to Add a Callout Button in the Menu

Updated on September 13, 2017

This article is about adding Callout Button in the Main Navigation Menu using Jupiter theme. The process needs custom CSS coding and in each case we will give the proper code as a base which you can use for further customization.

Callout Button 4

Add Callout Button in the Menu

You need to follow the steps below to add the Callout Button in the main menu of your website:

1Add a Menu Item.  

Go to WordPress Admin Menu > Appearance > Menus and add a Custom Link menu item. Set the Link option to the website you want to access and the Text option to whatever text you want your Callout Button to have.

Callout Button 1

2Activate CSS Classes.  

Scroll up to the top of the screen and click on the Screen Options. A dropdown menu will appear with different items. Enable the CSS Classes checkbox item and close the Screen Options dropdown menu.

Callout Button 2

3Add CSS Class.  

Scroll back to the menu item you created in step 1, and you will see a new option has appeared in the menu item called CSS Classes (Optional). Add the CSS Class below to that option:


Callout Button 3

4Save the Menu.  

Click on the Save button at the bottom of the screen to save all changes so far.

5Add Custom CSS Code.  

Go to Theme Options > Advanced > Custom CSS and add the code below:

.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;

Feel free to change the Paddings and Colors to suite your needs. The suggested CSS code is only a blueprint for your further customization.

Did this answer your question?