Adding a call to action button on your menu is a great way to draw attention to a specific page for your website and increase conversion.

As can be seen on our menu, we have a CTA Button that links to our contact page but you can link it to your store, a pricing page, or whatever you want.

To start with, go to your menu sections on the backend (Appearance -> Menus), and create a menu item for your desired page.

 

On the menus section, look to the top right corner of the screen and locate “Screen Options” and then check “CSS Classes”. This will enable you to add CSS to individual menu items.

Go to your desired menu tab and add the CSS class you decide to use. In our case, we use cta-button which is consistent with the code we provide below.

Go to your stylesheet and paste this code into it:

.cta-button {
border: 1px solid #4380ed;
border-radius: 30px;
background: #4380ed;
/* box-shadow: 0px 0px 12px 3px #4A76A0; */
transition: all .3s 0s;
margin-bottom: 15px;
}

.cta-button a {
padding: 18px !important;
color: white !important;
}

.cta-button:hover {
transform: scale(1.1);
transition: all .2s 0s;
background: #4380ed;
color: #ffffff;
border: 1px solid #4380ed;
box-shadow: 0 12px 24px -6px #4380ed;
}

You can customize the above code to suit your needs.