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

  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 8 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 8 years ago on Friday July 27, 2012 | Permalink
  3. 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 8 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 8 years ago on Tuesday July 31, 2012 | Permalink

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