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.

Hover Effect for Next and Back buttons

  1. ciznerguy
    Member

    I have the hover effect working fine for the normal submit button but it doesn't work for the next and back buttons for some reason. Here is what I was trying.

    [css]
    body .gform_wrapper .gform_body .gform_page_footer .gform_next_button input[type=image] {
        padding: 0;
    	width: auto !important;
    	background: url(http://www.ezcanadamoving.com/wp-content/uploads/2012/10/NextButton.png) center top no-repeat !important;
    	height: 43px !important;
    	width: 120px !important;
    	border: none !important
    }
    
    body .gform_wrapper .gform_body .gform_page_footer .gform_next_button:hover input[type=image] {
        padding: 0;
    	width: auto !important;
    	background: url(http://www.ezcanadamoving.com/wp-content/uploads/2012/10/NextButtonHover.png) center top no-repeat !important;
    	height: 43px !important;
    	width: 120px !important;
    	border: none !important
    }
    Posted 7 years ago on Saturday October 20, 2012 | Permalink
  2. Please post a URL to your form so we can see what you've got going on and then we can better help you tweak your CSS rules so they work the way you want. It's difficult to offer anything concrete without seeing your actual form in the page.

    Posted 7 years ago on Saturday October 20, 2012 | Permalink
  3. ciznerguy
    Member

    http://www.ezcanadamoving.com/get-free-quote/

    Thank you.

    Posted 7 years ago on Tuesday October 23, 2012 | Permalink
  4. ciznerguy
    Member

    has anyone accomplished a hover effect on the next and back buttons? (multi-stage form)

    Posted 7 years ago on Thursday October 25, 2012 | Permalink
  5. Please try changing line 10 to this:

    [css]
    body .gform_wrapper .gform_body .gform_page_footer .gform_image_button:hover{

    That worked for me to show the yellow button on hover.

    Posted 7 years ago on Thursday October 25, 2012 | Permalink
  6. ciznerguy
    Member

    Excellent Chris. Thank you.

    Posted 7 years ago on Thursday October 25, 2012 | Permalink
  7. ciznerguy
    Member

    actually doesn't quite work since It cant be applied to the back button. I"m sure I can find a half-assed way of fixing it but I wanted to specifically target the back and next buttons

    Posted 7 years ago on Thursday October 25, 2012 | Permalink
  8. Is the issue that because we are using .gform_image_button it will apply to both previous and next buttons equally? You could target the buttons by ID but that would be cumbersome if you have a lot of forms. Each form element will have a unique ID:

    id='gform_next_button_1_1'
    id='gform_previous_button_1_13'
    id='gform_previous_button_1'

    Rather than the .gform_image_button class, you could use the IDs specifically.

    Posted 7 years ago on Thursday October 25, 2012 | Permalink
  9. how can i add the id to .gform_image_button. Where should i put this line?
    id='gform_next_button_1_1'

    Posted 7 years ago on Friday December 21, 2012 | Permalink
  10. @clueno1, what are you trying to do? Sounds like you need to add your CSS to your theme's stylesheet, but I'm not sure exactly what you're asking.

    Posted 7 years ago on Friday December 21, 2012 | Permalink
  11. Thank you. I found the similar question and source here. Thank you

    Posted 7 years ago on Sunday December 23, 2012 | Permalink
  12. You're welcome.

    Posted 7 years ago on Monday December 24, 2012 | Permalink

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