Getting inconsistent styling (colors) on submit button in WordPress Elementor form

Question

This is a minor-but-annoying issue (typical web design) with color styling on my submit button. I'm using the page builder Elementor with OceanWP theme in WordPress. Site URL is http://catalystweb.design (under construction, of course)

The issue is that the colors seems to be "muted" on :active and :focus states. They are being applied, but not with full vibrancy.

I am linking to a brief screencast (12 seconds) of the issue, and including the custom CSS I've inserted into that page specifically. FYI the !important flags seem to be required to override some of the theme/builder styles, which makes it even more baffling as to why they are not fully applied in this case.

You'll see that the hover state of the button delivers the colors I've set; but on :focus (using tab) they are muted, and the same on :active (when clicking).

button[type=submit]:focus {
  border: 2px solid #63C1FF !important;
  background: #ffffff !important;
  color: #63C1FF !important;
}
button[type=submit]:active {
  border: 2px solid #ffffff !important;
  background: #63C1FF !important;
  color: #ffffff !important;
}

Thanks, any insights appreciated!

Answer 1

Your stylesheet here: http://catalystweb.design/wp-content/plugins/elementor/assets/css/frontend.min.css?ver=1.8.8

has an opacity setting on hover:

.elementor-button:focus,
.elementor-button:hover,
.elementor-button:visited {
    color: #fff;
    opacity: .9;
}

How you want to approach fixing that is up to you, while I don't recommend using !important; if you can avoid it:

.elementor-button:focus,
.elementor-button:hover,
.elementor-button:visited {
    opacity: 1 !important;
}

would work, or a slightly better approach such

button.elementor-button:focus,
button.elementor-button:hover,
button.elementor-button:visited {
    opacity: 1;
}

would work. You can put this in your main stylesheet or in the Additional CSS are of the customizer, or wherever you've been adding custom CSS.