How to Customize the Submit Button with CSS

September 15, 2021

UPDATE: Try the Form Designer video course to create fantastic Submit Button styles!

Did you know that green and blue are the most relaxing colors? That’s why they’re used by the most popular websites out there to help users feel good surfing those websites. Submit buttons in web forms should also feel right because that’s where people share their most sensitive info.

With this guide, you’re going to learn how to customize your submit buttons so you can make your visitors feel good when sending their info & increase your conversion rates.

Inject Custom CSS

Click the Form Designer icon. Then go to the Styles tab and paste the following CSS code or your custom CSS codes:

Inject Custom CSS

Inject Custom CSS

.form-submit-button {
     background:#0066A2;
     color:white;
     border-style:outset;
     border-color:#0066A2;
     height:50px;
     width:100px;
     font:bold15px arial,sans-serif;
     text-shadow:none;
}

Here’s how it’ll look afterward:

Submit Button

Details of the CSS Code for Your Submit Button

  • .form-submit-button – the selector for the submit button on your form.
  • background – sets up the background color behind the text.
  • color – determines the color of your text.
  • border-style – sets the style of your submits button borders.
  • border-color – sets the color of your submit button borders.
  • height – sets the height of your button and is indicated with pixels.
  • width – sets the width of your button and is indicated with pixels.
  • font – sets the font properties.

NOTE: Do not forget to add semicolons (;) after each property.

Submit Button CSS3 & Hover Effect

Follow the steps on changing your submit button as above. The only thing that changes is the code.

Example CSS3 for a submit button:

.form-submit-button {
     background:#B9DFFF;
     color:#fff;
     border:1pxsolid#eee;
     border-radius:20px;
     box-shadow:5px5px5px#eee;
     text-shadow:none;
}
.form-submit-button:hover {
     background:#016ABC;
     color:#fff;
     border:1pxsolid#eee;
     border-radius:20px;
     box-shadow:5px5px5px#eee;
     text-shadow:none;
}

Here’s how it looks.

Submit Button Mouse Hover On

and on hovering the mouse over it:

Submit Button Mouse Hover Off

Details Each CSS3 Code for Your Submit Button

  • .form-submit-button:hover – this is the class when the mouse hovers onto the submit button. Every other field is left the same except the background to show what’s happening on mouse hover.
  • border-radius – rounds the corner of your submit buttons.
  • box-shadow – sets a shadow for the submit button.
  • text-shadow – sets a shadow for the text inside the submit button (not applied to example).

How’d you do? Please share your thoughts or suggestions in the comments section below.

Was this guide helpful?
Contact Support:

Our customer support team is available 24/7 and our average response time is between one to two hours.
Our team can be contacted via:

Support Forum: https://www.jotform.com/answers/

Contact JotForm Support: https://www.jotform.com/contact/

Send Comment:

JotForm Avatar
This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

Comments: