Hover Effect for Next and Back buttons « Gravity Support Forums

Gravity Support Forums » Plugin Support » Gravity Forms

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

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

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

Thank you.

Posted 11 years ago on Tuesday October 23, 2012 | Permalink
ciznerguy
Member

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

Posted 11 years ago on Thursday October 25, 2012 | Permalink
Chris Hajer
Key Master
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 11 years ago on Thursday October 25, 2012 | Permalink
ciznerguy
Member

Excellent Chris. Thank you.

Posted 11 years ago on Thursday October 25, 2012 | Permalink
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 11 years ago on Thursday October 25, 2012 | Permalink
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'
```
Rather than the .gform_image_button class, you could use the IDs specifically.
Posted 11 years ago on Thursday October 25, 2012 | Permalink
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 11 years ago on Friday December 21, 2012 | Permalink
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 11 years ago on Friday December 21, 2012 | Permalink
clueno1
Member

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

Posted 11 years ago on Sunday December 23, 2012 | Permalink
Chris Hajer
Key Master

You're welcome.

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

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