Add a Gradient to Your CTA Button in WordPress

Are you on the hunt for a simple way to add a gradient to your CTA button in WordPress? Look no further! We understand the importance of creating an engaging user experience, and with our straightforward solution, you’ll be able to add a stunning gradient to your CTA button effortlessly.

Say goodbye to dull and uninspiring buttons, and welcome a visually captivating element that will leave a lasting impression on your visitors!

Table of contents

1. How to add a gradient background to a CTA button in your WordPress form
2. Add a gradient hover effect to your submit button
3. CSS rules to customize the direction of your gradient on your CTA button

1. How to add a gradient background to a CTA button in your WordPress form

Adding a gradient to your button is a fantastic way to make your WordPress form visually appealing and complement modern web design templates creating a sleek look.

With various gradient options to choose from, you can effortlessly elevate the appearance of your form and impress your users, eventually taking control of your visitor’s actions. So let’s look at how you can upgrade your submit button by adding a gradient background and give your WordPress form a stylish edge with the help of the Layout and Styles add-on!

Step 1: Add a Submit button to your WordPress form

If you’ve successfully installed our styling plugin, you will get access to Styles settings. Each Ninja Form field will have this section where you can modify your styling settings. Once you add the CTA button to your form, click on this field and open Styles.

These settings feature multiple styling sections. We will focus on two sections – Element Styles & Element Hover Styles. First, we will add a gradient background to submit button under the Element Styles. After, we will add a gradient background to Element Hover Styles which will create a lovely effect when your visitors hover over the button when clicking submit.

Step 2: Add a gradient to your submit button with Styles settings

Adding a gradient to your CTA button usually requires manually editing files with CSS code, Luckily, with our styling plugin, any advanced changes including modifications such as adding a gradient background to your button, making your button rounded (adding a radius), etc. can be done by toggling on the Show Advanced CSS Properties and placing a simple CSS rule.

Don’t get scared when you read the CSS rule! We have a code ready for you. And if you don’t like the colors we picked, you can simply just replace them with your chosen hex color code (#) and that’s it!

Here is a simple example of the gradient button we created in our default WordPress theme. (Blue color)  As a bonus, we’ve also added a gradient hover effect! (Orange – yellow color)

 

What you’ll want to do to create this effect, is navigate to your Submit Button > Styles > Element Styles. Then toggle on the Show Advanced CSS Properties and enter the code below. We added extra CSS rules to create a rounded button (border-radius) and align the button to the center (margin, display).

background: linear-gradient(90deg, #3f51b5, transparent) #2196f3;
border-radius: 30px; 
margin: auto;
display: block;

Here is what it looks like inside our form builder:

In this CSS rule, we defined an angle (90deg), which is equivalent to “to right”. An angle rule gives you more control over the direction of the gradient.

2. Add a gradient hover effect to your submit button

If you want to add a gradient to your submit button when the user hovers over the button prior to submitting your form, click on your CTA button, select Styles > Element Hover Styles, and enable Advanced CSS.

Then, add the CSS rule we got ready for you below, and click save. Please note, we added extra CSS rules to create a rounded button (border-radius) and align the button to the center of the form (margin, display).

background-image: linear-gradient(to right, red , yellow);
border-radius: 30px;
margin: auto;
display: block;

Here is what it looks like inside Ninja Form:

That’s it. Now you will be able to add a gradient background to your CTA button! But we are not done yet. We’ve also put together a short list of CSS rules below if you want to customize the direction of your gradient.

 

3. CSS rules to customize the direction of your gradient on your CTA button

To create a radial gradient with yellow and orange colors as an example, use the following code:

background-image:radial-gradient(yellow, #f06d06);

Example:

 

To create a linear gradient from the top to the bottom

background-image: linear-gradient(#fbc2eb, #a6c1ee);

Example:

 

To create a diagonal gradient (top left to bottom right)

background-image: linear-gradient(to bottom right, #84fab0, #8fd3f4);

Example: 

 

To have more control over the direction of the gradient, use the angle

background-image: linear-gradient(180deg, #3f51b5, #2196f3);

Example: 

 

Instead of defying the angle, and being more specific with the color transitions, you can also add a percentage:

background-image: linear-gradient(to right, #fbc2eb 0%, #a6c1ee 51%, #fbc2eb 100%);

Example:

Unlock the full potential of your CTA button today!

That’s it! You’ve just learned how to add a gradient to your CTA button in WordPress. Want to unlock the full potential of your CTA button? Dive deep into the art of WordPress button customization with our excellent tutorials below that help you craft a submit button that commands attention and compels action driving more conversions from your WordPress forms.

• How to Style Submit Button in WordPress
• How to Change Button Hover Color in WordPress
• How to Make a Gradient Submit Button for Your WordPress Form
• How To Style Your WordPress Forms (Easy Examples)

Did we ignite your imagination? Besides styling your CTA button, our Layout and Styles add-on helps you make styling changes across your entire form including color, shape, size, border, width, height, and more.

Unlike our competitors, you can get this Ninja Forms add-on individually, or as a part of a membership plan. With a 14-day money-back guarantee and Ninja Forms being a trusted and respected brand in the WordPress world, you have nothing to lose. So don’t wait, and unleash your creative side with our styling plugin today!