How to Customize the Submit Button With CSS

April 24, 2024

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.

Youtube Embed Poster: C0fzIsZA2r8

To change your submit button’s appearance with CSS

  1. In the Form Builder, open the Form Designer on the right.
Step to open the form designer in Jotform
  1. In the right panel, go to Styles at the top.
  2. Scroll down to Inject Custom CSS.
Steps to apply custom CSS in Jotform
  1. Enter your custom CSS or apply 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