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 and increase your conversion rates.
Change the Submit Button’s Appearance
- In the Form Builder, click the Form Designer icon.
- Go to the Styles tab.
- Scroll down to the Inject Custom CSS section.
- Apply your custom CSS rules or use 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;
}Here’s how it’ll look afterward:
Details of the CSS Code for Your Submit Button
- .form-submit-button – the selector for 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 Hover Effect
Go to the Inject Custom CSS section in the Form Designer using the steps above and inject the following 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:
Details Each CSS3 Code for Your Submit Button
- .form-submit-button:hover – this is the class when the mouse hovers onto 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 the submit button.
- text-shadow – sets a shadow for the text inside the submit button (not applied to example).
How’d you do? Please share your thoughts or suggestions in the comments section below.
Send Comment:
38 Comments:
Hi, so I'm a complete beginner when it comes to CSS code. However I have managed to change up the 'Submit' button to something i like with the below code, but would like to add a gradient to the black background of the button. Is this possible & what would i need to add to the code? Thanks in advance
.form-submit-button {
background: #000;
color: #896F17;
border: 1px solid #896F17;
border-radius: 20px;
box-shadow: none;
text-shadow: none;
font-size: 20px
}
.form-submit-button:hover {
background: #896F17;
color: #fff;
border: 1px solid #000;
border-radius: 20px;
box-shadow: 10px 10px 10px #000;
text-shadow: none;
}
Hello, Is there a way to see the CSS code that is there for the buttons we have now. We noticed you have changed your available button styles and you removed the gold two tone style we use for all of our forms. We love the look of these two tone styles so not sure why you removed them in favor of more picture styles. Also if we create a custom CSS button is there a way to store that button somewhere or do we need to copy/paste the CSS code every time?
how to restrict our submit button from blank submission. Our website is made in WordPress
Need quick response please
2 quick questions:
1. how to add url to this submit button to redirect to another page
2. How to identify the two submit buttons separately.. i have 2 of them.. how do i refer to each of them in the code.. i want one to be green and another one to be blue..
Please help.. my link is :
how to center align the submit button in HTML Code
Simple yet brilliant
Thanks for the guide
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?
Hi, Could you tell me how to apply CSS3 to make the colour slide up the button when hovered over?
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,
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.
I want to make counter in the FORM for registering the number of applicants for attending a meeting. I am not able to do that. How to make a counter?
How do you get it to acctually submit though?
I don't know where to start... I cloned a website to use for my theme but no idea where can't access that specific theme. I am about to give up.
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
I can not access the creator of themes
How can I import my own documents saved on computer into jot form
Also can't save any themes
having the same problem here, can't save to private
Theme doesn't save if you try to save to private.
Add login page trick tell me please
Hi, what a cool idea!
I am having a few issues submitting my theme.
1.) The thumbnail for my form is not ideal. Because my form embeds Youtube, one gets a black screen.
2.) When I try to remove screenshots, I can't. Do you have a recommended size?
3.) Even though I am trying to change the price to $10, it keeps displaying "Free" when I save.
Thanks!
Nick
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,
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,
Is there a way to change the design of the browse button on the file upload option?
Brilliant :-)
Excellent