How to Customize the Submit Button With CSS

June 10, 2023

Aside from the Submit button’s ready-made styles, you can also customize your submit button with CSS. Make your visitors feel good when sending their info and increase your conversion rates.

To change your submit button’s appearance with CSS

  1. In the Form Builder, select the paint roller icon in the upper-right corner to open the Form Designer.
  2. In the Form Designer pane on the right, go to Styles at the top.
  3. Scroll down to Inject Custom CSS.
Steps to apply custom CSS in Jotform Form Builder
  1. Apply your custom CSS 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;
}

To break that down

  • .form-submit-button — The selector for the submit button on your form.
  • background — The color behind the text.
  • color — Determines the text color.
  • border-style — Sets the style of your submits button’s borders.
  • border-color — The color of your submit button borders.
  • height — Sets the height of your button in pixels.
  • width — The width of your button in pixels.
  • font — The text font properties.

Here’s what the button looks like afterward:

A sample of custom submit button

To add a hover effect to your submit button, you can use the following sample CSS 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:

A sample of custom submit button
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:

  • Angela Lacey - Profile picture
  • Shiraj Kaul - Profile picture
  • Hacienda CDC - Profile picture
  • imran - Profile picture
  • Santosh Achwani - Profile picture
  • harinir686 - Profile picture
  • Saptarshi - Profile picture
  • Afreedi - Profile picture
  • sachin jangid - Profile picture
  • Downes_j - Profile picture
  • Miriam Thomas - Profile picture
  • gerardlobo - Profile picture
  • ailsargh - Profile picture
  • weckholz - Profile picture
  • kamini - Profile picture
  • Yolanda L - Profile picture
  • muhammad ramzan - Profile picture
  • mangesh - Profile picture
  • nanoputian - Profile picture
  • rajkumarvarier - Profile picture
  • jgcarguy7 - Profile picture
  • fpalarca - Profile picture
  • Sharan - Profile picture
  • Polycarp - Profile picture
  • savulski - Profile picture