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.

Custom Hover Submit Button Image

Gravity Support Forums » Plugin Support » Gravity Forms

  1. ciznerguy
    Member

    I am trying to add a custom hover effect for my submit button. Its easy to add the submit image but how do I go about adding another image for a hover effect? Thanks

    Posted 12 years ago on Friday July 27, 2012 | Permalink

  2. ciznerguy
    Member

    Well I kind of figured it out. Here's my temporary solution.

    body #gform_wrapper_1 .gform_footer input[type=image] {
	padding: 0;
	width: auto !important;
	background: url(http://www.dubaishippinghelp.com/wp-content/uploads/2012/07/SubmitButton3.png) center top no-repeat !important;
	height: 84px !important;
	width: 179px !important;
	border: none !important
}

body #gform_wrapper_1 .gform_footer:hover input[type=image] {
	padding: 0;
	width: auto !important;
	height: 84px !important;
	width: 179px !important;
	background: url(http://www.dubaishippinghelp.com/wp-content/uploads/2012/07/SubmitButton5.png) center top no-repeat !important;
}
    Posted 12 years ago on Friday July 27, 2012 | Permalink

  3. Chris Hajer
    Key Master

    What about that makes it temporary? The :hover pseudo-class is the correct way to do it.

    http://css-tricks.com/pseudo-class-selectors/

    Posted 12 years ago on Sunday July 29, 2012 | Permalink

  4. ciznerguy
    Member

    the z-index is off but that should be a quick fix. not really necessary in this case though. Thanks!

    Posted 12 years ago on Tuesday July 31, 2012 | Permalink

This topic has been resolved and has been closed to new replies.