https://legacy.forums.gravityhelp.com/topic/next-and-submit-button-styling Gravity Support Forums Topic: Next and Submit Button Styling en-US Sun, 19 Apr 2026 19:56:23 +0000 http://bbpress.org/?v=1.0.1 q https://legacy.forums.gravityhelp.com/search.php https://legacy.forums.gravityhelp.com/topic/next-and-submit-button-styling#post-73516 Sat, 01 Sep 2012 00:38:22 +0000 Chris Hajer 73516@https://legacy.forums.gravityhelp.com/ <p>Thank you for that update. Have a nice weekend. </p> https://legacy.forums.gravityhelp.com/topic/next-and-submit-button-styling#post-73511 Fri, 31 Aug 2012 23:40:11 +0000 soupdigital 73511@https://legacy.forums.gravityhelp.com/ <p>Thanks you so much Chris, this works perfectly!! </p> https://legacy.forums.gravityhelp.com/topic/next-and-submit-button-styling#post-73502 Fri, 31 Aug 2012 18:46:00 +0000 Chris Hajer 73502@https://legacy.forums.gravityhelp.com/ <p>Via email:</p> <p>Try adding this to your theme's stylesheet, wherever the theme provider suggests you add your custom CSS rules:</p> <pre><code>[css] .gform_wrapper input.button { font-size: 14px; border-top: 1px solid rgba(255, 255, 255, 0.25); color: #FFFFFF; background-color: #FF5C00; line-height: 1em; padding: 0.6em 1.3em; position: relative; text-align: center; text-decoration: none; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25); white-space: nowrap; display: inline-block; cursor: pointer; }</code></pre> <p>There are probably some gradient and hover issues to deal with, but this will get you close. Screenshot: <a href="http://minus.com/lbgFoiT7v0lgny" rel="nofollow">http://minus.com/lbgFoiT7v0lgny</a> </p> https://legacy.forums.gravityhelp.com/topic/next-and-submit-button-styling#post-67433 Sun, 22 Jul 2012 11:36:33 +0000 Chris Hajer 67433@https://legacy.forums.gravityhelp.com/ <p>Don't modify any of the plugin files. You will add custom styles to your themes's style.css. If you copied the big blocks of style from the Fancy Buttons section of the stylesheet, then pasted them to the bottom of you style.css, you can change the existing selectors to include .gform_wrapper input.button. Try that for a couple and take a look at your form. I was able to change the size and color pretty quickly. But there are a ton of styling changes applied to buttons in your theme. It is going to take some work to get the Gravity Forms buttons to look the same, but it will be nice when that is done.</p> <p>Just start by copying the block from your style.css to the bottom of style.css, then add .gform_wrapper input.button where there are existing button references and refresh the page. You might be surprised how quickly that goes. </p> https://legacy.forums.gravityhelp.com/topic/next-and-submit-button-styling#post-67409 Sun, 22 Jul 2012 01:40:23 +0000 soupdigital 67409@https://legacy.forums.gravityhelp.com/ <p>Thanks for the quick reply Chris, legend.<br /> I think this might be above my basic skills but I'll keep trying. I'm trying to find the element with the plugin editor for Gforms but can't find it. What plugin file should I be looking at?<br /> Alternatively if there is a better way to change the formatting of the submit and next button that would get me close to that style then that would be ok also.</p> <p>Cheers </p> https://legacy.forums.gravityhelp.com/topic/next-and-submit-button-styling#post-67407 Sun, 22 Jul 2012 01:19:43 +0000 Chris Hajer 67407@https://legacy.forums.gravityhelp.com/ <p>I'm not sure of the easiest way to do this. If you look in your theme's stylesheet, you will see a section called <strong>/*=== FANCY BUTTONS</strong>. That's where the styles for the buttons begin. You will need to use those styles to target this Gravity Form element:</p> <pre><code>.gform_wrapper input.button {</code></pre> <p>I'm not sure if it will be easier to add that selector to each block in the stylesheet where the buttons are affected, or if it's easier to copy all the button styles to the bottom of your stylesheet and then add the <strong>.gform_wrapper input.button</strong> selector there. </p> <p>You need to do one or the other to make the Gravity Forms buttons look like your theme's styled buttons. </p> https://legacy.forums.gravityhelp.com/topic/next-and-submit-button-styling#post-67402 Sun, 22 Jul 2012 01:03:13 +0000 soupdigital 67402@https://legacy.forums.gravityhelp.com/ <p>I'm trying to keep consistency and leverage the same styling as my themes buttons for the "Next" and "Submit" button within Gravity Forms. I know I need to do this within the css but not too sure where to start.<br /> It does not need to be the exact styling of my theme if that is an issue. But just need to begin editing the style of my form buttons (outside of loading and image within the form itself) as the default style is not optimal.<br /> You can see the button style on the homepage here: <a href="http://www.prepit.co.nz/" rel="nofollow">http://www.prepit.co.nz/</a> </p>