User Guide

 

How to Customize the Submit Button with CSS

How to Customize the Submit Button with CSS

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.

Send Comment

18 Comments...

  • tanjam

    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.

  • mangesh

    where the enter data save

  • nanoputian

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

  • jgcarguy7

    How do you get it to acctually submit though?

  • Sharan

    Hi Thr,

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

  • Polycarp

    Thanks, helped me alot

  • charms

    thank you

  • yolo Boss

    yolo

  • obaid fayaz

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

  • felipeaze.fab

    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
    =(

  • Karthick

    Thank you very much..

  • reifentyres

    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/

  • shadyad

    very good

  • ranjata

    good

  • reifentyres

    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/

  • Rich

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

  • markessex

    Brilliant :-)

  • sabharwal

    Excellent