Hover effects on "submit" buttons...

mjsadv · July 2020

When "hover effects" is enabled on the theme it creates an unattractive gray background on all my WPForms "Submit" buttons. Help?

Pablo · July 2020

Hi,
Please always attach a link so we can check it out. If the page is offline(localhost) then our help will be limited, you will have to contact us when the page is online. Also please make sure that the page is not under maintenance before you provide us the link.
It is always a good idea to also attach a screenshot, for that use services like snag.gy or pasteboard.co
thanks

mjsadv · July 2020

mjsadv · July 2020

mjsadv · July 2020

Also, the site is online, but I'd prefer to share the link privately?

Pablo · July 2020

Send it here, it will be a lot quicker than sending it privately.

I'll remove it as soon as I notice it

Thanks

mjsadv · July 2020

The website is live at [hidden by support team] -- all the wpforms submit buttons have this ugly hover effect. It goes away when I turn the hover effects off in theme options - but I don't want the hover effects off. I just don't know the css to adjust. Thank you!

Pablo · July 2020

Sorry, but we do not know how this plugin works, we do not support the WP Forms plugin

We strongly suggest to use Contact Form 7 or Gravity Forms instead, it will surely look and will work better with our theme, because we support them and they are fully tested with the BeTheme.

Thanks

mjsadv · July 2020

Is there no way to write some !important CSS to overwrite that gray background hover? I have to assume it's some button css in the back end? Where is the hover effects css located?

ETA I found it in the css.

    .button-flat input[type="submit"]:after,.button-flat input[type="reset"]:after,.button-flat input[type="button"]:after{content:"";position:absolute;left:0;top:0;height:100%;width:100%;z-index:1;transition:all .3s;background:rgba(0,0,0,.07);opacity:1} <--- this needed to be 0
    .button-flat a.button:hover:after,.button-flat a.action_button:hover:after,.button-flat a.tp-button:hover:after,.button-flat button:hover:after,
    .button-flat input[type="submit"]:hover:after,.button-flat input[type="reset"]:hover:after,.button-flat input[type="button"]:hover:after{width:100%;opacity:1} <--- this needed to be 0

Pablo · July 2020

Well, use this CSS:

.button-flat input[type="button"]:after{opacity:0 !important} 
.button-flat input[type="button"]:hover:after{opacity:0 !important;}

Paste it into Theme Options > Custom CSS & JS > CSS

thanks

mjsadv · July 2020

Didn't work that way. Hmmm.

(Right now I'm just using the long version in the Custom CSS and it's working.)

Bryan · July 2020

What do you mean by "long version in custom css" ?

Please paste this css at the beginning of the custom CSS page.

thanks

mjsadv · October 2020

The more complicated CSS I posted worked... your short version of css did not work.

Phil · October 2020

Hello,

Please insert following code instead of the old one into Betheme > Theme Options > Custom CSS & JS > CSS

.button-flat button:hover::after{opacity:0 !important}

Thanks

Hover effects on "submit" buttons...

Comments