WPForms Background/Hover Colors for Submit Button Different From Theme’s

My WPForms submit button initially was showing different colors for background and hovers color relative to my theme’s default settings.

I did notice that I may modify the submit button’s color using the block editor to match my theme’s default settings, which is nice. 

Anyway, and unfortunately, my block editor doesn’t enable me to modify the submit button’s hover color. So I get a hover color that’s different from all the other hover colors used on my site, which all default to the theme’s color scheme except WPForms.

So, I got some tips from the Internet on what code I needed to insert in my WordPress’s custom CSS:

Here’s what I inserted:

.wpforms-form button[type=submit] {

background-color: #2872fa !important;

border-color: #2872fa !important;

color: #fff !important;

transition: background 0.3s ease-in-out;

}

.wpforms-form button[type=submit]:hover {

background-color: #1559ed !important;

}

The first part of this code works fine; the submit button shows the new color, #2872fa. However the second part, regarding the hover color, does not show the color that I indicated of 1559ed. The hover color still shows the default hover color that WPForms uses.

I’m curious why WPForm doesn’t default to my theme’s color themes for the submit button (both base and hover colors) by default. I have a form from a different provider (IceGram Express) for a Subscription form and it matched my theme’s colors for the submit button (base and hover) right out of the box, no fiddling around and troubleshooting necessary by me.

Has anyone encountered this problem and have a solution? I’m sure it’s something simple, but I’m a newbie at this CSS stuff.

I did read that another user wrote this a week or two ago, so I’m wondering if my issue is related:

“In version 1.8.9.6, a background hover was added to the submit button using !important, which makes it impossible to customize the css. Could you revert this change? I have a purple website with the submit button hover in blue ??

I used rollback to version 1.8.9.5 and the color returned to normal.”

I look forward to any feedback or solutions. In the meantime, if I find a work-around, then I’ll share it with the community.

The page I need help with: [log in to see the link]