How to Customize the Submit Button with CSS

Last Update: April 28, 2017

UPDATE: Try 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. 


1. Click the Form Designer icon


2. Go to "CSS" tab and paste the following CSS code or your custom CSS codes.


.form-submit-button {

background: #0066A2;

color: white;

border-style: outset;

border-color: #0066A2;

height: 50px;

width: 100px;

font: bold 15px arial, sans-serif;

text-shadow:none;

}

 Here's how it'll look afterward

 


Details of the CSS code for your submit button


.form-submit-button - Selects 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: 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 it looks.

css3 submit button


and on hovering the mouse over it:

css3 submit button hover


Details each CSS3 code for your submit button


.form-submit-button:hover - This is the class when the mouse is hovered on to 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 your submit button.

text-shadow (not applied to example) - Sets a shadow for the text inside your submit button.


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


19 Comments...


   
sabharwal (December 07, 2011 at 05:35 AM)

Excellent


   
markessex (December 19, 2011 at 07:32 AM)

Brilliant :-)


   
Rich (February 04, 2012 at 06:05 PM)

Is there a way to change the design of the browse button on the file upload option?

View Answer


   
reifentyres (February 21, 2012 at 02:51 AM)

Hello,i found your site through search,yours site is excellent and a nice website...

The contents are nice &will grow higher in future...

thanks,

http://www.reifen.ms/


   
ranjata (March 09, 2012 at 12:48 PM)

good


   
shadyad (March 12, 2012 at 04:20 PM)

very good


   
reifentyres (March 24, 2012 at 06:11 AM)

Hello,i found your site through search,yours site is excellent and a nice website...

The contents are nice &will grow higher in future...

thanks,

http://www.reifen.ms/


   
Karthick (April 09, 2013 at 08:56 AM)

Thank you very much..


   
felipeaze.fab (June 04, 2013 at 08:43 AM)

Hi!

The code:

.form-submit-button{
background:#0066A2;
color:white;
border-style:outset;
border-color:#0066A2;
height:50px;
width:100px;
font: bold 15px arial,sans-serif;
}
It´s no funcion in INTERNET EXPLORER 7
=(

View Answer


   
obaid fayaz (May 05, 2014 at 08:51 PM)

what is the html-code for .form-submit-button
and .hover

View Answer


   
yolo Boss (November 05, 2014 at 02:31 PM)

yolo


   
charms (March 30, 2015 at 05:15 AM)

thank you


   
Polycarp (April 22, 2015 at 11:35 PM)

Thanks, helped me alot


   
Sharan (May 18, 2015 at 04:06 PM)

Hi Thr,

After the first click, how can we bring the button style back to normal state without clicking on the screen again

View Answer


   
jgcarguy7 (January 28, 2016 at 12:25 PM)

How do you get it to acctually submit though?

View Answer


   
nanoputian (June 27, 2016 at 09:28 PM)

You might find you need to add the CSS !important in order to get some of your CSS to operate.

View Answer


   
mangesh (November 25, 2016 at 08:42 AM)

where the enter data save

View Answer


   
tanjam (December 14, 2016 at 12:29 AM)

I can find CSS for the error style associated with the submit button. I changed the error style for the entire form, but I can't do it for the submit button. You can see it now when you press the submit button.

View Answer


Send Comment