PLEASE NOTE: These forums are no longer utilized and are provided as an archive for informational purposes only. All support issues will be handled via email using our support ticket system. For more detailed information on this change, please see this blog post.

How to Give the Submit Button a Hover State?

  1. Hi guys,

    I've been plugging away at this, but no luck. I'm sure someone will have the obvious answer. How do I make the submit button change when hovered over? I need to turn this into a hover state:

    .gform_wrapper .gform_footer input.button,
    .gform_wrapper .gform_footer input[type=submit]

    Thanks!

    Posted 11 years ago on Saturday July 14, 2012 | Permalink
  2. We can give more specific assistance if you post a link to your form. But to add a hover state to the CSS you posted there, add this:

    [css]
    .gform_wrapper .gform_footer input.button:hover

    and also

    [css]
    .gform_wrapper .gform_footer input.button:active

    and finally

    [css]
    .gform_wrapper .gform_footer input.button:focus

    I've never had good luck getting this to work (especially with IE):

    [css]
    input[type='submit']

    so I generally avoid it. To be super specific, you can add a class to your form and then target that in your theme's stylesheet. Or just get more specific with the CSS rules. If it's not working, please post a link to your form and we'll help you out.

    Posted 11 years ago on Sunday July 15, 2012 | Permalink