Title: Submit Button Styling
Last modified: August 31, 2016

---

# Submit Button Styling

 *  Resolved [justwogames](https://wordpress.org/support/users/justwogames/)
 * (@justwogames)
 * [10 years, 1 month ago](https://wordpress.org/support/topic/submit-button-styling-2/)
 * Hi there,
 * I was wanting to style my submit button on my form but don’t know where to start
   nor can I find any help documentation to take me through this.
 * Has any one got anything I could read or could tell me how to tackle this?
 * Cheers,
 * [https://wordpress.org/plugins/wpforms-lite/](https://wordpress.org/plugins/wpforms-lite/)

Viewing 10 replies - 1 through 10 (of 10 total)

 *  [Jared Atchison](https://wordpress.org/support/users/jaredatch/)
 * (@jaredatch)
 * [10 years, 1 month ago](https://wordpress.org/support/topic/submit-button-styling-2/#post-7302592)
 * Sure, we can help you out.
 * Do you have anything specific you want? The submit button can be styled with 
   a little CSS code, which we can assist you with.
 * Once we nail that down, then you’ll put the code on your site – it’s simple.
 * Let me know!
 *  Thread Starter [justwogames](https://wordpress.org/support/users/justwogames/)
 * (@justwogames)
 * [10 years, 1 month ago](https://wordpress.org/support/topic/submit-button-styling-2/#post-7302693)
 * Hi Jared,
 * Thanks for getting in touch!
 * I know a little code but just don’t know to do with it. I managed find the code
   being used at the moment and changed the values to suit the look I’m looking 
   for (white outline, pink/red centre – I also want it centered beneath the form):
 *     ```
       div.wpforms-container-full .wpforms-form input[type=submit],
       div.wpforms-container-full .wpforms-form button[type=submit],
       div.wpforms-container-full .wpforms-form .wpforms-page-button {
       	background-color: #e02945;
       	border: 5px solid #fff;
       	color: #333;
       	font-size: 1em;
       	padding: 10px 150px;
       }
   
       div.wpforms-container-full .wpforms-form input[type=submit]:hover,
       div.wpforms-container-full .wpforms-form input[type=submit]:active,
       div.wpforms-container-full .wpforms-form button[type=submit]:hover,
       div.wpforms-container-full .wpforms-form button[type=submit]:active,
       div.wpforms-container-full .wpforms-form .wpforms-page-button:hover,
       div.wpforms-container-full .wpforms-form .wpforms-page-button:active {
       	background-color: #f34640;
       	border: 5px solid #fff;
       	cursor: pointer;
       }
       ```
   
 * You can also view the button I’m trying to edit on the form on this page: [http://justwogames.com/apps/](http://justwogames.com/apps/)
 * Thanks!
 *  [Jared Atchison](https://wordpress.org/support/users/jaredatch/)
 * (@jaredatch)
 * [10 years, 1 month ago](https://wordpress.org/support/topic/submit-button-styling-2/#post-7302714)
 * Sure thing. So just as a precaution, I’d prefix that code with another CSS variable,
   to make sure it has top priority. I’ve adjusted the code for you below:
 *     ```
       #wrapper div.wpforms-container-full .wpforms-form input[type=submit],
       #wrapper div.wpforms-container-full .wpforms-form button[type=submit],
       #wrapper div.wpforms-container-full .wpforms-form .wpforms-page-button {
       	background-color: #e02945;
       	border: 5px solid #fff;
       	color: #333;
       	font-size: 1em;
       	padding: 10px 150px;
       }
   
       #wrapper div.wpforms-container-full .wpforms-form input[type=submit]:hover,
       #wrapper div.wpforms-container-full .wpforms-form input[type=submit]:active,
       #wrapper div.wpforms-container-full .wpforms-form button[type=submit]:hover,
       #wrapper div.wpforms-container-full .wpforms-form button[type=submit]:active,
       #wrapper div.wpforms-container-full .wpforms-form .wpforms-page-button:hover,
       #wrapper div.wpforms-container-full .wpforms-form .wpforms-page-button:active {
       	background-color: #f34640;
       	border: 5px solid #fff;
       	cursor: pointer;
       }
       ```
   
 * Normally the best place to put the above code is inside your theme. However in
   this case I’m not familiar with that theme and it doesn’t appear to be using 
   the common style.css, so I would recommend using a simple plugin.
 * Here is a great how-to and video that shows you how and where to place the code
   🙂
 * [http://www.wpbeginner.com/plugins/how-to-easily-add-custom-css-to-your-wordpress-site/](http://www.wpbeginner.com/plugins/how-to-easily-add-custom-css-to-your-wordpress-site/)
 *  [soli2009](https://wordpress.org/support/users/soli2009/)
 * (@soli2009)
 * [9 years, 12 months ago](https://wordpress.org/support/topic/submit-button-styling-2/#post-7302834)
 * I cannot find at all where to make these changes, this thread does not specify.
   Which file has “.wpforms-page-button”? I need to do the same thing but using 
   the Custom CSS Manager with new class and entering it into “Submit Button CSS
   Class” text box does nothing. Is this supposed to work that way?
 *  [Jared Atchison](https://wordpress.org/support/users/jaredatch/)
 * (@jaredatch)
 * [9 years, 12 months ago](https://wordpress.org/support/topic/submit-button-styling-2/#post-7302835)
 * These CSS updates can go in your theme’s style.css file OR you can use a plugin
   such as Simple Custom CSS to avoid editing your theme.
 * This link has a video walk-through of the Simple Custom CSS plugin:
 * [http://www.wpbeginner.com/plugins/how-to-easily-add-custom-css-to-your-wordpress-site](http://www.wpbeginner.com/plugins/how-to-easily-add-custom-css-to-your-wordpress-site)
 * By default the WPForms styling used will override your theme, which is to prevent
   theme conflicts. So if you try to apply a submit button css class, it might not
   apply correctly since the WPForms CSS is overriding that.
 * To get around that you can make the CSS highly selector specific (as in the code
   examples mentioned earlier) OR you can change WPForms to use “Base styling only”
   which will let your theme handle many of the styling decisions (but won’t work
   with every theme) [http://cl.ly/2P1G2E471u38](http://cl.ly/2P1G2E471u38)
 *  [yolo](https://wordpress.org/support/users/omg1/)
 * (@omg1)
 * [9 years, 8 months ago](https://wordpress.org/support/topic/submit-button-styling-2/#post-8188242)
 * Hi
    The above code didn’t work for me, any other ideas?
 * [http://tinyurl.com/zfu6khy](http://tinyurl.com/zfu6khy)
 *  [Jared Atchison](https://wordpress.org/support/users/jaredatch/)
 * (@jaredatch)
 * [9 years, 8 months ago](https://wordpress.org/support/topic/submit-button-styling-2/#post-8191194)
 * Where did you place the custom CSS coded? I don’t see it on your site or on the
   page linked.
 *  [yolo](https://wordpress.org/support/users/omg1/)
 * (@omg1)
 * [9 years, 8 months ago](https://wordpress.org/support/topic/submit-button-styling-2/#post-8191509)
 * Hi Sorry
    I started a separate thread, I lost track of this thread’s location.
   I was able to use Fire Bug and find the CSS needed:
 * div.wpforms-container-full .wpforms-form button[type=”submit”] {
    background-
   color: #000000; }
 *  [alexzyz](https://wordpress.org/support/users/alexzyz/)
 * (@alexzyz)
 * [9 years, 1 month ago](https://wordpress.org/support/topic/submit-button-styling-2/#post-9065688)
 * Hi
 * What would be the CSS code if I’d like to change the color of the submit-button,
   always when I mouse-over it?
 * Thank you.
 *  [Jared Atchison](https://wordpress.org/support/users/jaredatch/)
 * (@jaredatch)
 * [9 years, 1 month ago](https://wordpress.org/support/topic/submit-button-styling-2/#post-9066158)
 * Hey alexzyz,
 * We have a doc just for that! Check out [https://developers.wpforms.com/docs/change-the-submit-button-color/](https://developers.wpforms.com/docs/change-the-submit-button-color/)
 * The rule that has `:hover` is what tells the browser to change the CSS when the
   user mouses over it.
 * Hope that helps.

Viewing 10 replies - 1 through 10 (of 10 total)

The topic ‘Submit Button Styling’ is closed to new replies.

 * ![](https://ps.w.org/wpforms-lite/assets/icon.svg?rev=3254748)
 * [WPForms - Easy Form Builder for WordPress - Contact Forms, Payment Forms, Surveys, & More](https://wordpress.org/plugins/wpforms-lite/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/wpforms-lite/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/wpforms-lite/)
 * [Active Topics](https://wordpress.org/support/plugin/wpforms-lite/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/wpforms-lite/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/wpforms-lite/reviews/)

## Tags

 * [button](https://wordpress.org/support/topic-tag/button/)
 * [button styling](https://wordpress.org/support/topic-tag/button-styling/)
 * [forms](https://wordpress.org/support/topic-tag/forms/)
 * [styling](https://wordpress.org/support/topic-tag/styling/)
 * [submit button](https://wordpress.org/support/topic-tag/submit-button/)

 * 10 replies
 * 5 participants
 * Last reply from: [Jared Atchison](https://wordpress.org/support/users/jaredatch/)
 * Last activity: [9 years, 1 month ago](https://wordpress.org/support/topic/submit-button-styling-2/#post-9066158)
 * Status: resolved