Print
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.
and on hovering the mouse over it:
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.
thanks sir it is helpful
Hey there ... simple question; How can I change who a SUBMIT button emails for responses? I'm guessing it is defaulted to Jotform account site, and I have to go there to get repossess, but can I have the submit button on my form be directed to my own email (not just as a notification)?
Thanks,
J Downes
I am trying to add another form to the submit button. When my clients hits the submit button that it would take them to another form to fill out.
Thanks
Miriam
How do I get the "Submit" button to send form to my email?
thanks
Hi, Could you tell me how to apply CSS3 to make the colour slide up the button when hovered over?
Thanks.
Does this feature depend on the form? I use a card form and the form designer only shows "Themes" and "Individual" where I can set some (not all colors) but no CSS.
i have written this code in form
and in head i have written
.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;
}
its not working now wht should i do???
Hi there, I'd like to have a spacing/padding around my su_button, so that the buttons are more on their own instead of attached to eachother. What code do I have to use?
height, padding-bottom only give me higher buttons, but I just need more space around it.
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://itcollegeall.blogspot.com
where the enter data save
You might find you need to add the CSS !important in order to get some of your CSS to operate.
How do you get it to acctually submit though?
Hi Thr,
After the first click, how can we bring the button style back to normal state without clicking on the screen again
Thanks, helped me alot
thank you
yolo
what is the html-code for .form-submit-button
and .hover
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
=(
Thank you very much..
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/
very good
good
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/
Is there a way to change the design of the browse button on the file upload option?
Brilliant :-)
Excellent