How to Change the Submit Button Color

Introduction

Would you like to change the submit button color on your forms? A simple CSS snippet is all that you need in order to change the appearance of the form’s submit button to match the branding of your site. In this tutorial, we’ll cover the basic CSS needed to change the color of your buttons.

By default WPForms styles the submit button color with a soft gray background. However, you may want to change the color to better match the colors on your website or company branding. This can be accomplished with a short CSS snippet.

Creating your form

We’ll begin by creating a new form and adding our fields. If you need any assistance with how to create a new form, please check out this documentation.

Adding the CSS

In order to change the color of the button, you’ll need to copy this CSS to your site.

If you need assistance in how and where to add CSS to your site, please check out this tutorial.

.wpforms-form button[type=submit] {
    background-color: #024488 !important;
    border-color: #024488 !important;
    color: #fff !important;
    transition: background 0.3s ease-in-out;
}

.wpforms-form button[type=submit]:hover {
    background-color: #022B57 !important;
}

The above CSS will change the submit button color background to blue (#024488) with white text on all WPForms Submit buttons on your site.

And that’s it! You’ve now changed the color of your submit button. Would you like to learn how to center your form? Please take a look at our tutorial on How to Center a Form.

FAQ

Q: Why doesn’t this CSS work for me?

A: There could be many reasons why you’re not seeing your change to your site and this could be anything from caching or something overwriting the CSS even with the use of the !important; on each CSS rule.

You can read through the troubleshooting CSS guide for any assistance.

Q: Will this work for the Next and Previous buttons too?

A: If you are using a Page Break in your form and are using Next and Previous buttons for navigation, we’ll use some CSS that will make all these buttons with the exact same styling. Simply copy this CSS to your site.

.wpforms-form button[type=submit], button.wpforms-page-button {
    background-color: #024488 !important;
    border-color: #024488 !important;
    color: #fff !important;
    transition: background 0.3s ease-in-out;
}
.wpforms-form button[type=submit]:hover, button.wpforms-page-button:hover {
    background-color: #022B57 !important;
}