How to Customize the Submit Button with CSS

February 18, 2022

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.

Change the Submit Button’s Appearance

  1. In the Form Builder, click the Form Designer icon.
  2. Go to the Styles tab.
  3. Scroll down to the Inject Custom CSS section.
form-builder-inject-custom-css-min.png
  1. Apply your custom CSS rules or use the following code:
.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-custom-style-min.png

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 Hover Effect

Go to the Inject Custom CSS section in the Form Designer using the steps above and inject the following code:

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

Here’s how the button looks while resting and when hovered on:

submit-button-hover-effect-min.png

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:

  • imran
  • Santosh Achwani
  • harinir686
  • Saptarshi
  • Afreedi
  • sachin jangid
  • Downes_j
  • Miriam Thomas
  • gerardlobo
  • rays
  • ailsargh
  • guy from Russia
  • weckholz
  • kamini
  • Yolanda L
  • muhammad ramzan
  • mangesh
  • nanoputian
  • rajkumarvarier
  • jgcarguy7
  • fpalarca
  • Sharan
  • Polycarp
  • charms
  • savulski
  • anjusaul
  • ccg
  • jmerchan
  • radanza
  • FreeFbliker
  • minnichn
  • yolo Boss
  • obaid fayaz
  • felipeaze.fab
  • Karthick
  • reifentyres
  • shadyad
  • ranjata
  • reifentyres
  • Rich
  • markessex
  • sabharwal