https://legacy.forums.gravityhelp.com/topic/gform-button-how-do-you-add-custom-images-to-the-nextprevious-buttons-in-css Gravity Support Forums Topic: Gform button, how do you add custom images to the next/previous buttons in CSS en-US Tue, 21 Apr 2026 19:33:57 +0000 http://bbpress.org/?v=1.0.1 q https://legacy.forums.gravityhelp.com/search.php https://legacy.forums.gravityhelp.com/topic/gform-button-how-do-you-add-custom-images-to-the-nextprevious-buttons-in-css#post-37693 Wed, 12 Oct 2011 09:03:56 +0000 Kevin Flahaut 37693@https://legacy.forums.gravityhelp.com/ <p>Yep, you were 99% there. I'm happy I could help get you to the 100% mark. Thanks for the update. </p> https://legacy.forums.gravityhelp.com/topic/gform-button-how-do-you-add-custom-images-to-the-nextprevious-buttons-in-css#post-37677 Wed, 12 Oct 2011 04:14:30 +0000 phirefly 37677@https://legacy.forums.gravityhelp.com/ <p>Thats fantastic Kevin, I actually had that exact code but without the text indent, thats sorted it right out!<br /> Many Thanks </p> https://legacy.forums.gravityhelp.com/topic/gform-button-how-do-you-add-custom-images-to-the-nextprevious-buttons-in-css#post-37649 Tue, 11 Oct 2011 19:25:34 +0000 Kevin Flahaut 37649@https://legacy.forums.gravityhelp.com/ <p>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.</p> <pre><code>[css] .gform_previous_button{ background-image: url(&#39;..images/form_next.jpg&#39;); width: 97px; height: 50px; border: 0; color: transparent; text-indent: -9000px }</code></pre> https://legacy.forums.gravityhelp.com/topic/gform-button-how-do-you-add-custom-images-to-the-nextprevious-buttons-in-css#post-37633 Tue, 11 Oct 2011 18:05:05 +0000 Carl Hancock 37633@https://legacy.forums.gravityhelp.com/ <p>Gravity Forms supports using images for buttons for the submit button and next/previous buttons. </p> <p>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: <a href="http://i.imgur.com/4ly9N.png" rel="nofollow">http://i.imgur.com/4ly9N.png</a></p> <p>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: <a href="http://i.imgur.com/HD22S.png" rel="nofollow">http://i.imgur.com/HD22S.png</a> </p> https://legacy.forums.gravityhelp.com/topic/gform-button-how-do-you-add-custom-images-to-the-nextprevious-buttons-in-css#post-37606 Tue, 11 Oct 2011 17:16:13 +0000 phirefly 37606@https://legacy.forums.gravityhelp.com/ <p>I'm trying to make the 'next' 'previous' and 'submit' buttons show the images I've created instead of using text.<br /> I did this in CSS by adding this code:<br /> <pre><code>[css] .gform_previous_button{ background-image:url(&#39;form_next.jpg&#39;); width: 97px; height: 50px; border:0px; color: transparent; }</code></pre> <p>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.<br /> Any ideas?<br /> Thanks </p>