Change button color to contact form 7 – Sela

You can make a change like that with some custom CSS.

To add custom CSS: Firstly set up a child theme or activate a custom CSS plugin. (If you have Jetpack installed then you can activate its custom CSS module.)

The following will change the default colour of buttons on your site to #529FC2:

button {
	color: #529FC2;
}

However, the plugin you’re using may add different classes to the button. If you’re able to provide a link to your site and an example of the button on your site, I’ll be able to provide more specific CSS.

I attempted to add the above code to the CSS, however this time it didn’t change the color.
Thankfully I have Jetpack and the custom CSS module I have used in changing other color items.

https://www.stitchesindesign.info

Best,
Christina

Give this a try:

button, input[type="button"], input[type="reset"], input[type="submit"], #infinite-handle span {
    background-color: #529FC2;
}

If that still doesn’t work, please provide a link to the specific page whose button colour isn’t changing and we’ll take another look. Thanks.

Kathryn,
Thanks, that changed the color. You rock!
Best,
Christina

Glad that did the trick.

Hello Kathryn,
I added the code below to the CSS and I’m very happy because it changed the color of the buttons on my site. But is it possible to keep the button of the main menu in another color ? Otherwise on the mobile its appears like a red button on a green menu bar. Thank you !

https://www.scripteo.net/

(button, input[type=”button”], input[type=”reset”], input[type=”submit”], #infinite-handle span {
background-color: #529FC2;
}

Sorry I didn’t see the answer had been treated yet. I just added :

.main-navigation button {
background-color: #49b2b9;
}

Thanks for having a such an extensive support site, as a new user of wordpress I am sure that this will be very beneficial for my learning curve. In follow up to this question I am looking to make a related change to just one button on one contact form that is setup with the contact form 7 plugin. I am looking to change the button that is in the code below from a black background to HEX #0072DD:

[submit class:button id:form-submit “Request White Paper”]

Is there anyway to update the color by editing the text above to insert the hex id?

Thanks ??

• This reply was modified 7 years, 11 months ago by kevt4i.

I was able to figure this out thanks!