How to Add Button styling in a menu

This tutorial is for adding the button in navigation. If you want a button in a menu navigation of your site and also want to give styling like background color, hover color, border etc to your button. Just follow the tutorial, you can do this by adding some simple custom CSS to it.

For adding buttons in Menus

Just follow the instructions given below:-

• • First go to Appearance > Menus
  • Create a menu name, select page and custom link to the menu. ( Page > Add new)
  • Adding a class id for your page just select the CSS class option in menu structure item and save it.

• This will add a button to your site and you can also add a link to it.
• Now go to customize and add custom CSS by inspecting the menu item id follow this link
• Here are some examples for designing the button using Custom CSS.

.yourclass {
border:1px solid #ec7e01;
background-color:
#ec7e01;
border-radius:10px;
}
.yourclass a {
color: #fff;
}
.yourclass:hover{
background-color:
#fec188;
}

.yourclass {
padding: 0.2em 1em 0.2em 1em;
border-radius: 10px;
background-color:
#169cdd;
}
.yourclass a {
color: #fff;
}

.yourclass {
border:1px solid
#4d4d4d ;
background-color:#4d4d4d;
}
.yourclass a {
color: #fff;
}

.yourclass {
border:1px solid #e92a20;
background-color:#e92a20;
border-radius:5px;
}
.yourclass a {
color:
#fff;
}
.yourclass:hover{
opacity:0.7;
background-color:#f35148;
border:1px solid #f35148;
}

Hope this will help you. For more information you can contact our support team at support forum.