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

Gravity Support Forums » Plugin Support » Gravity Forms

  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
}
    Copy
    Posted 12 years ago on Saturday October 20, 2012 | Permalink

  2. Kevin Flahaut
    Administrator

    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 12 years ago on Saturday October 20, 2012 | Permalink

  3. ciznerguy
    Member

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

    Thank you.

    Posted 12 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 12 years ago on Thursday October 25, 2012 | Permalink

  5. Chris Hajer
    Key Master

    Please try changing line 10 to this:

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

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

    Posted 12 years ago on Thursday October 25, 2012 | Permalink

  6. ciznerguy
    Member

    Excellent Chris. Thank you.

    Posted 12 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 12 years ago on Thursday October 25, 2012 | Permalink

  8. Chris Hajer
    Key Master

    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'
    Copy

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

    Posted 12 years ago on Thursday October 25, 2012 | Permalink

  9. clueno1
    Member

    how can i add the id to .gform_image_button. Where should i put this line?
    id='gform_next_button_1_1'

    Posted 12 years ago on Friday December 21, 2012 | Permalink

  10. Chris Hajer
    Key Master

    @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 12 years ago on Friday December 21, 2012 | Permalink

  11. clueno1
    Member

    Thank you. I found the similar question and source here. Thank you

    Posted 12 years ago on Sunday December 23, 2012 | Permalink

  12. Chris Hajer
    Key Master

    You're welcome.

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

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