Title: Style form submit button
Last modified: August 21, 2016

---

# Style form submit button

 *  Resolved [chris@chrisjauslin.ca](https://wordpress.org/support/users/chrischrisjauslinca/)
 * (@chrischrisjauslinca)
 * [13 years, 1 month ago](https://wordpress.org/support/topic/style-form-submit-button/)
 * I need some help to style the wpcf7 submit button, to match the class of the 
   call-to-action button of my website.
    Theme is responsive. [http://www.chrisjauslin.ca](http://www.chrisjauslin.ca)
 * Thanks in advance!
    Chris
 * [http://wordpress.org/extend/plugins/contact-form-7/](http://wordpress.org/extend/plugins/contact-form-7/)

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

 *  [Neil Murray](https://wordpress.org/support/users/buzztone/)
 * (@buzztone)
 * [13 years, 1 month ago](https://wordpress.org/support/topic/style-form-submit-button/#post-3774045)
 * You should be able to make changes at [http://www.chrisjauslin.ca/?custom-css](http://www.chrisjauslin.ca/?custom-css)
   as you have started with the following css:
 *     ```
       .wpcf7-form input[type="submit"] {
           background-color: #9DA91B;
       }
       ```
   
 * Background colour change is not showing due to following css in [http://www.chrisjauslin.ca/wp-content/themes/responsive/style.css](http://www.chrisjauslin.ca/wp-content/themes/responsive/style.css)
 *     ```
       a.button, input[type="reset"], input[type="button"], input[type="submit"] {
           background-color: #F9F9F9;
           background-image: -moz-linear-gradient(center top , #F9F9F9, #F1F1F1);
       }
       ```
   
 * You will need to overwrite this and all other relevant css items in [http://www.chrisjauslin.ca/wp-content/themes/responsive/style.css](http://www.chrisjauslin.ca/wp-content/themes/responsive/style.css)
 * Use [Firebug ](https://getfirebug.com/)or [Chrome Dev Tools](https://developers.google.com/chrome-developer-tools/)
   to see what is going on.
 *  Thread Starter [chris@chrisjauslin.ca](https://wordpress.org/support/users/chrischrisjauslinca/)
 * (@chrischrisjauslinca)
 * [13 years, 1 month ago](https://wordpress.org/support/topic/style-form-submit-button/#post-3774093)
 * Thanks for your reply,
 * Take a look at this code:
 * _[ Moderator Note: [Please post code](http://codex.wordpress.org/Forum_Welcome#Posting_Code)
   or markup snippets between backticks or use the code button. ]_
 *     ```
       <div class="call-to-action"><a href="http://www.chrisjauslin.ca/apply/">START TODAY</a></div>
       ```
   
 * What this does is that it styles the button on my page: [http://www.chrisjauslin.ca/the_easiest_mortgage/](http://www.chrisjauslin.ca/the_easiest_mortgage/);
   to look as the class of my call-to-action button; which class apparently is called:”
   blue button”
 * In the CSS editor I have managed to change the colour of the responsive theme“
   blue button”. The colour is now green actually (this is the way I want it).
 * So my question is: how do I enter a CSS code to associate the blue button class
   to the wpcf7 submit button, similar to the way I have done so in the mentioned
   page.
 * Thanks a lot in advance,
    Chris
 *  Thread Starter [chris@chrisjauslin.ca](https://wordpress.org/support/users/chrischrisjauslinca/)
 * (@chrischrisjauslinca)
 * [13 years, 1 month ago](https://wordpress.org/support/topic/style-form-submit-button/#post-3774095)
 * On above post the code came short, this is the example:
 *     ```
       <div class="call-to-action">
       <a class="blue button" href="http://www.chrisjauslin.ca/apply/">START TODAY</a>
       </div>
       ```
   
 *  [Neil Murray](https://wordpress.org/support/users/buzztone/)
 * (@buzztone)
 * [13 years, 1 month ago](https://wordpress.org/support/topic/style-form-submit-button/#post-3774171)
 * > Use [Firebug](https://getfirebug.com/) or [Chrome Dev Tools](https://developers.google.com/chrome-developer-tools/)
   > to see what is going on.
 * These tools will allow you to see which class is being used by CF7 in the wpcf7
   submit button on any page. Then you can write CSS to target that class.
 * Alternatively you can give the submit button you want to style the class “blue_button”(
   not “blue button” with space) in the CF7 Form interface – you can add specific
   id & class to any CF7 element.
 *  Thread Starter [chris@chrisjauslin.ca](https://wordpress.org/support/users/chrischrisjauslinca/)
 * (@chrischrisjauslinca)
 * [13 years, 1 month ago](https://wordpress.org/support/topic/style-form-submit-button/#post-3774196)
 * Thanks buzz tone!
    Styling the following made the trick!
 *     ```
       a.button, input[type="reset"], input[type="button"], input[type="submit"] {
           background-color: #F9F9F9;
           background-image: -moz-linear-gradient(center top , #F9F9F9, #F1F1F1);
       }
       ```
   
 * And that affects all submit buttons residing on my web, which is even better.
   
   I replaced all the #hex codes for my #hex colour codes.

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

The topic ‘Style form submit button’ is closed to new replies.

 * ![](https://ps.w.org/contact-form-7/assets/icon.svg?rev=2339255)
 * [Contact Form 7](https://wordpress.org/plugins/contact-form-7/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/contact-form-7/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/contact-form-7/)
 * [Active Topics](https://wordpress.org/support/plugin/contact-form-7/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/contact-form-7/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/contact-form-7/reviews/)

 * 5 replies
 * 2 participants
 * Last reply from: [chris@chrisjauslin.ca](https://wordpress.org/support/users/chrischrisjauslinca/)
 * Last activity: [13 years, 1 month ago](https://wordpress.org/support/topic/style-form-submit-button/#post-3774196)
 * Status: resolved