Hover effects on "submit" buttons...

Comments

• 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

  Learn more: Video Tutorials | How To | FAQ Vote on what comes next
• 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
  

  Learn more: Video Tutorials | How To | FAQ Vote on what comes next
• mjsadv

  July 2020 edited 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
  

  Learn more: Video Tutorials | How To | FAQ Vote on what comes next
• mjsadv

  July 2020 edited 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
  

  Learn more: Video Tutorials | How To | FAQ Vote on what comes next
• mjsadv

  July 2020 edited 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
  

  Learn more: Video Tutorials | How To | FAQ Vote on what comes next
• 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

  Learn more: Video Tutorials | How To | FAQ Vote on what comes next