UPDATE: Try the 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.
Inject Custom CSS
Click the Form Designer icon. Then go to the Styles tab and paste the following CSS code or your custom CSS codes:
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 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:
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 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.