How to Change the Submit Button Color

Overview

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 to color to better match the colors on your website or company branding. This can be accomplished with a short CSS snippet.

Setup

In order to change the color of the button, you’ll need to add the following CSS snippet to your site.

.wpforms-form button[type=submit] {
	background-color: #024488 !important;
	border-color: #024488 !important;
	color: #fff !important;
}

.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. The colors are defined using hex codes, which you can look up here.

this is how we changed the submit button color

For additional style changes to the submit button such as hover styles, please see our submit button styling tutorial.

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

Why doesn’t this CSS work for me?

A: If you’ve added the CSS and it doesn’t appear to be working, there could be conflicts involved with the theme CSS or custom class names added to the form. You can read through the troubleshooting guide for any assistance.