Adding Call to Action Button in WordPress Menu

Published On:
Reading Time:
1 Minute

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.

Sigma 1 Logo

Signup For Our Newsletter

Stay up to date with the newest trends in technology, exclusive offers & discounts from our company, and new products and services that we are offering.

Want to Hire Us For Your Next Project?

We work with all different types of companies from around the world with one goal in mind - to help them grow their brand and acquire new customers.
Contact Us

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.

Sigma 1 Logo

Signup For Our Newsletter

Stay up to date with the newest trends in technology, exclusive offers & discounts from our company, and new products and services that we are offering.

Want to Hire Us For Your Next Project?

We work with all different types of companies from around the world with one goal in mind - to help them grow their brand and acquire new customers.
Contact Us
Dimitri is is a full-stack developer and the founder of Sigma 1. He spends the majority of his time designing websites for customers. However, when he has a bit of free time, you can catch him on a hike or exploring the nature around Las Vegas.

Leave a Reply

Your email address will not be published. Required fields are marked *

Leave a Reply

Your email address will not be published. Required fields are marked *