User Guide

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.

18 Comments...

  • sabharwal

    Excellent

  • markessex

    Brilliant :-)

  • Rich

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

  • 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/

  • ranjata

    good

  • shadyad

    very 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/

  • Karthick

    Thank you very much..

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

  • obaid fayaz

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

  • yolo Boss

    yolo

  • charms

    thank you

  • Polycarp

    Thanks, helped me alot

  • Sharan

    Hi Thr,

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

  • jgcarguy7

    How do you get it to acctually submit though?

  • nanoputian

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

  • mangesh

    where the enter data save

  • 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.

Send Comment