Gform button, how do you add custom images to the next/previous buttons in CSS

Gravity Support Forums » Plugin Support » Gravity Forms

phirefly
Member
I'm trying to make the 'next' 'previous' and 'submit' buttons show the images I've created instead of using text.
I did this in CSS by adding this code:
```
[css]
.gform_previous_button{
background-image:url('form_next.jpg');
width: 97px;
height: 50px;
border:0px;
color: transparent;
}
```
This seems to work fine in Firefox, but in Safari its showing a kinda white blob over each image. Its probably because the text 'value' still exists, but I don't know how to remove the text value from showing.
Any ideas?
Thanks
Posted 13 years ago on Tuesday October 11, 2011 | Permalink
Carl Hancock
Administrator

Gravity Forms supports using images for buttons for the submit button and next/previous buttons.

You do this using the Form Settings for the submit button and going to the Advanced tab and changing the Form Button to use an Image instead of the default text. See this screenshot: http://i.imgur.com/4ly9N.png

For the Next/Previous buttons you would edit each individual Page Break field and configure the Next and Previous buttons to use an Image instead of the default text. See this screenshot: http://i.imgur.com/HD22S.png

Posted 13 years ago on Tuesday October 11, 2011 | Permalink
Kevin Flahaut
Administrator
If you're trying replacing the button with a background image, you can usually use a negative "text-indent" value to hide the text off the left side of the viewport… something like this.
```
[css]
.gform_previous_button{
	background-image: url('..images/form_next.jpg');
	width: 97px;
	height: 50px;
	border: 0;
	color: transparent;
	text-indent: -9000px
}
```
Posted 13 years ago on Tuesday October 11, 2011 | Permalink
phirefly
Member

Thats fantastic Kevin, I actually had that exact code but without the text indent, thats sorted it right out!
Many Thanks

Posted 13 years ago on Wednesday October 12, 2011 | Permalink
Kevin Flahaut
Administrator

Yep, you were 99% there. I'm happy I could help get you to the 100% mark. Thanks for the update.

Posted 13 years ago on Wednesday October 12, 2011 | Permalink

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