How to Make a Gradient Submit Button for your WordPress Form

Did you know that adding a little pizzazz to your submit button can help you to capture more leads by enticing visitors to click on the colorfully styled gradient submit button? If your forms are feeling a little outdated take a walk with me and we will explore the awesomeness that is gradients!

No Developer? No Problem!

With the help of the Layout and Styles add-on, you can quickly and easily add gradient styling to any Submit button, no developer needed! Our Layout and Styles add-on allows you to make changes to your WordPress forms with minimal CSS.

Here is the Only Thing You’ll Need

You will need the Layout and Styles add-on, so if you don’t have it, you can get it here.  Once installed and activated head over to Ninja Forms > Styling > Style Settings. If you are unsure of how to install Layout and Styles, I recommend referencing our installation guide for help.

The Style Settings is the heart and soul of the Layout and Styles add-on.  This is where the magic happens 😊

Step 1: Pick your Favorite Submit Button Gradient

You will notice I have included three gradient options, linear, radial, and conic.  Choose one to style your submit button. There are no wrong answers.

Gradient Options

Linear Gradient

Linear Graident CSS Code Snippet

Getting a little anxious about the code snippet below?  Don’t worry.  All we are going to have you do is copy & paste this into Layout and Styles Style Settings.

border-image: linear-gradient(rgb(0 6 143), rgb(242 66 250)) 1;
background-image: linear-gradient(rgb(0,6,143), rgb(242,66,250));
-webkit-background-clip: text; 
-webkit-text-fill-color: transparent;
/* if you like the look of the font in the provided form examples, here is what I used. 
font-weight: 600; 
font-family:’ Tahoma’; 
*/

A linear gradient creates an image consisting of a progressive transition between two or more colors along a straight line.” According to the Mozilla Developer Network,

Radial Gradient

Radial Gradient CSS Code Snippet

Getting a little anxious about the code snippet below?  Don’t worry.  All we are going to have you do is copy & paste this into Layout and Styles Style Settings.

border-image:radial-gradient(rgb(0,143,104), rgb(250,224,66)) 1;  
background-image: radial-gradient(rgb(0,143,104), rgb(250,224,66)) 1;
-webkit-background-clip: text; 
-webkit-text-fill-color: transparent;
/* if you like the look of the font in the provided form examples, here is what I used. 
font-weight: 600; 
font-family:’ Tahoma’; 
*/

The Mozilla Developer Network states, “the radial-gradient creates an image consisting of a progressive transition between two or more colors that radiate from an origin”. 

Conic Gradient

Conic Gradient CSS Code Snippet

Getting a little anxious about the code snippet below?  Don’t worry.  All we are going to have you do is copy & paste this into Layout and Styles Style Settings.

border-image: conic-gradient(red, yellow, lime, aqua, blue, magenta, red) 1;
background-image: conic-gradient(red, yellow, lime, aqua, blue, magenta, red); 
-webkit-background-clip: text; 
-webkit-text-fill-color: transparent;
/* 
 if you like the look of the font in the provided form examples, here is what I used.
font-weight: 600; 
font-family:’ Tahoma’; 
*/

 

Conic-gradients according to the Mozilla Developer Network, “create an image consisting of a gradient with color transitions rotated around a center point (rather than radiating from the center).”

Step 2: Edit One WordPress Form or All!

Add a Submit Button Gradient to a Single WordPress Form

You may not want to add a gradient to every submit button on your site.  If that’s the case, you can make the change to a single form. To do so return to the Ninja Forms Dashboard click the gear icon next to the form you want to add the gradient to and click Edit. This will redirect you to another window bringing up the selected form.

1. Click on the Submit field and then look for the Styles drop-down and open it.
2. Under Element Styles add the following values:
   
   Border Width – 8
   Border Style –  select Solid
   Width  – auto
   Font Size – 32
3.  Toggle “on” the Advanced CSS Properties button and copy and paste the following code:
   

   height: auto;
   border-image: /* Copy + Paste the gradient of your choice */
   background-image: /* Copy + Paste the gradient of your choice.  Remeber to add remove the number at the end. */
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   font-weight: 600;
   font-family:’ Tahoma’; /* if you like the font in the form examples and would like to use it on your form. */
   

Apply Submit Button Gradients to All WordPress Forms

To apply the gradient to the submit button for every form open up your WordPress admin and jump over to Ninja Forms > Styling. This is where the Styling Settings are located for the Layout and Styles add-on.  Remember, all forms will now contain the selected gradient.

1. You will see five tabs,  click on the tab that reads, ‘Field Type Styles’
2. Next, click on the Select A Field Type drop-down, and select Submit 
3. Check the box titled, ‘Show Advanced CSS Properties’. Doing so enables a hidden field that allows you to add additional CSS properties that have not yet been included in the Layout and Styles add-on.
   
4. Four accordions should appear titled, Submit Wrap, Submit Label, Submit Element, and Submit Element Hover.  Open Submit Element
   
   
5. Add the following values to the fields found within the Submit Element accordion:Border Width – 10
   Border Style – select Solid
   Height – auto
   Font Size – 32
6. Copy & paste the gradient code snippet of your choice, see Gradient Options to the Advanced CSS field and click Save Settings.
   
7. Save Setting and view form. Woohoo! Your form is now eye-catching with the newly added text and border gradient.

Not liking what you see? Feel free to continue the customizing until you are happy with the submit button. I encourage you to experiment with the Background Color, Width, and the Submit Element Hover styles.

Styling with Gradients is Fun!

Now that you know adding gradients to your submit button is a breeze.  Take the leap and get our Layout and Styles add-on today!  All of our products come with a 14-day money-back guarantee so give it a try and if you don’t like it ask us for a refund 😉