[submit class:3dbutton “Send Pre-Enrollment”]
as the last line in my contact form. The form still shows the default button style. When I go to “Inspect Element” on the button it shows . So it’s calling the class, but it still displays the default submit button? * URL to form: [http://rxaidllc.com/4tier/enroll/](http://rxaidllc.com/4tier/enroll/) * [https://wordpress.org/plugins/contact-form-7/](https://wordpress.org/plugins/contact-form-7/) Viewing 9 replies - 1 through 9 (of 9 total) * [Neil Murray](https://wordpress.org/support/users/buzztone/) * (@buzztone) * [11 years, 6 months ago](https://wordpress.org/support/topic/custom-css-for-submit-button/#post-5485205) * Had a quick look at your live form using Firebug. * Looks like a CSS Specificity issue – see [CSS Specificity: Things You Should Know](http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/) * For your example I would have used something like the following to both improve Specificity and limit side-effects: * ``` .wpcf7 input[type="submit"] .3dbutton { // add styling here } ``` * Thread Starter [Tyler](https://wordpress.org/support/users/tyleraldridge85/) * (@tyleraldridge85) * [11 years, 6 months ago](https://wordpress.org/support/topic/custom-css-for-submit-button/#post-5485322) * I’ve added the following into the plugin’s style.css file: * ``` .wpcf7 input[type="submit"] .3dbutton {color:#FFFFFF;padding:0px 20px;font-size:16px;line-height:32px;border-color:#629dd2;border-radius:7px;-moz-border-radius:7px;-webkit-border-radius:7px;text-shadow:0px 0px 0px #000000;-moz-text-shadow:0px 0px 0px #000000;-webkit-text-shadow:0px 0px 0px #000000"} ``` * And there is still no change to submit button. Am I missing something here? * [Neil Murray](https://wordpress.org/support/users/buzztone/) * (@buzztone) * [11 years, 6 months ago](https://wordpress.org/support/topic/custom-css-for-submit-button/#post-5485338) * > RE: Am I missing something here? * Looks like it. The following CSS code would probably need to be on a single line as follows to give you increased CSS specificity: * ``` .wpcf7 input[type="submit"] .3dbutton { // add styling here } ``` * Also the code I gave was intended as general guidance only. You would need to use Firebug or Chrome Dev Tools to examine the HTML and CSS of your particular CF7 form in detail to create an appropriate solution. * Finally you should not be editing the plugin’s style.css file. Any changes you make will be lost when you next update the plugin. Add via [Child Theme](http://wplift.com/customise-wordpress-child-theme) or [use custom CSS plugin](http://wordpress.org/extend/plugins/search.php?q=custom+css). See also [Styling Contact Form](http://contactform7.com/styling-contact-form/) for a general explanation of styling CF7 forms using CSS. * Thread Starter [Tyler](https://wordpress.org/support/users/tyleraldridge85/) * (@tyleraldridge85) * [11 years, 6 months ago](https://wordpress.org/support/topic/custom-css-for-submit-button/#post-5485343) * Okay, I have tried simplifying my code to get the right syntax, and I tried all of the following in my theme’s built in Custom CSS option (this is where I have all other CSS adjustments for my site, that work just fine), hit save and refreshed and nothing changed about the button. * ``` .wpcf7 input[type="submit"] .3dbutton { color: #1e73be } ``` * ``` .wpcf7-submit input[type="submit"] .3dbutton { color: #1e73be } ``` * ``` .wpcf7-submit .3dbutton { color: #1e73be } ``` * ``` .wpcf7-submit 3dbutton { color: #1e73be } ``` * ``` .3dbutton { color: #1e73be } ``` * ``` .wpcf7-form-control wpcf7-submit 3dbutton { color: #1e73be } ``` * ``` .wpcf7-form-control .wpcf7-submit .3dbutton { color: #1e73be } ``` * None of these combinations work. I don’t get why this isn’t working. The class being called for the button is currently “wpcf7-form-control wpcf7-submit 3dbutton”. * [Neil Murray](https://wordpress.org/support/users/buzztone/) * (@buzztone) * [11 years, 6 months ago](https://wordpress.org/support/topic/custom-css-for-submit-button/#post-5485347) * Try following: * .wpcf7 input[type=”submit”].3dbutton { color: #1e73be } * **Note:** No space between input[type=”submit”] and .3dbutton which targets input[ type=”submit”] of class .3dbutton within .wpcf7 class. * [gardnerc](https://wordpress.org/support/users/gardnerc/) * (@gardnerc) * [11 years, 6 months ago](https://wordpress.org/support/topic/custom-css-for-submit-button/#post-5485351) * Hi Tyler, maybe it would be easier for you to start over. Here’s what I did and it works just fine: * fyi, I use both CF 7 and Mailpoet in my WordPress 4.0.1 site. You can see my forms at [my site](https://www.positek.net/contact/) — a CF7 form is in the content area and a Mailpoet form is in the sidebar. * I wanted to have all my submit buttons look the same for visitors across any plugins that use buttons. I also wanted to have the button button look change depending on state (hover and click). When I added Mailpoet, I added css code for the Mailpoet buttons, so it was a simple matter to just add the same class to my CF7 form code: * `[submit class:wysija-submit-field "Send Message"]
` * The button code that I put into custom.css (my theme’s additional css file) is: * ``` .wysija-submit-field { background: #fac903; background-image: -webkit-linear-gradient(top, #fac903, #a86b02); background-image: -moz-linear-gradient(top, #fac903, #a86b02); background-image: -ms-linear-gradient(top, #fac903, #a86b02); background-image: -o-linear-gradient(top, #fac903, #a86b02); background-image: linear-gradient(to bottom, #fac903, #a86b02); -webkit-border-radius: 10; -moz-border-radius: 10; border-radius: 10px; font-family: Arial; font-size: 20px; font-weight:bold; padding: 10px 10px 10px 10px; border: solid #8c711f 2px; text-decoration: none; } .wysija-submit-field:hover { background: #3cb0fd; background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db); background-image: -moz-linear-gradient(top, #3cb0fd, #3498db); background-image: -ms-linear-gradient(top, #3cb0fd, #3498db); background-image: -o-linear-gradient(top, #3cb0fd, #3498db); background-image: linear-gradient(to bottom, #3cb0fd, #3498db); text-decoration: none; } .wysija-submit-field:active { background: #464747; background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db); background-image: -moz-linear-gradient(top, #3cb0fd, #3498db); background-image: -ms-linear-gradient(top, #3cb0fd, #3498db); background-image: -o-linear-gradient(top, #3cb0fd, #3498db); background-image: linear-gradient(to bottom, #3cb0fd, #3498db); -webkit-border-radius: 10; -moz-border-radius: 10; border-radius: 10px; text-decoration: underline; } ``` * That css code gives 3 different looks for a button, and I can change the words for the button right in the CF7 form, so I can use different words for different forms. The button resizes in width to fit the button text. * I tried other methods (including putting the class into the ``code in the CF7 form, but that didn’t work right. The above method works across all the major browser platforms. * If you put the css code into style.css then anytime you update your theme you’ll have to re-do the custom button code. This way if I want to globally change the look of the buttons my site visitors see, I only need to edit custom.css and change the above code information (e.g., the color numbers, the radius numbers, and the decoration) for each button state. * So to copy my method, you’d: 1. revert your style.css to the default that comes with your theme, and also the CF7 button code 2. add the css code I showed you above into the custom.css file (if you have one), or at the bottom of the style.css if you don’t. You can change the colors to fit your theme, and use a different class name if you want. 3. add the class into the CF7 submit button code. * I hope this helps you. * [gardnerc](https://wordpress.org/support/users/gardnerc/) * (@gardnerc) * [11 years, 6 months ago](https://wordpress.org/support/topic/custom-css-for-submit-button/#post-5485352) * Oh, and this method supersedes any button styling you might have done in CF7, so you don’t have to revert all that (unless you want to just clean things up). * [Justin Dodson](https://wordpress.org/support/users/justin-dodson/) * (@justin-dodson) * [11 years, 1 month ago](https://wordpress.org/support/topic/custom-css-for-submit-button/#post-5485415) * [@gardnerc](https://wordpress.org/support/users/gardnerc/) or to anyone who can help… * I am using CF7 and was able to change my submit button thru custom css code, but for some reason it doesn’t carry over on a cell phone. Here is a link the [site](http://myestatesale.com/site1) I am working on, and here is my custom css code… * .wpcf7-form p input.wpcf7-submit:hover { background-color: #002b57; background- image: -moz-linear-gradient(center top,#000d21 0%,#001c46 100%); background-image:- webkit-linear-gradient(center top,#000d21 0%,#001c46 100%); background-image:- ms-linear-gradient(center top,#000d21 0%,#001c46 100%); background-image: -o- linear-gradient(center top,#000d21 0%,#001c46 100%); background-image: linear- gradient(center top,#000d21 0%,#001c46 100%); border: 1px solid #000d21; } * .wpcf7-form p input.wpcf7-submit { background-color: #fefefe; background-image:- moz-linear-gradient(center top,#001c46 0%,#000d21 100%); background-image: -webkit- linear-gradient(center top,#001c46 0%,#000d21 100%); background-image: -ms-linear- gradient(center top,#001c46 0%,#000d21 100%); background-image: -o-linear-gradient( center top,#001c46 0%,#000d21 100%); background-image: linear-gradient(center top,#001c46 0%,#000d21 100%); border: 1px solid #000d21; border-radius: 5px; box-shadow: 0 1px 1px rgba(0,0,0,0.2); color: #ffffff !important; display: inline- block; font: 13px/43px “PTSansBold”, arial, helvetica, sans-serif; height: 43px; padding: 0 30px; text-align: center; text-shadow: 0 1px 0 #000000; text-transform: uppercase; } * [Justin Dodson](https://wordpress.org/support/users/justin-dodson/) * (@justin-dodson) * [11 years, 1 month ago](https://wordpress.org/support/topic/custom-css-for-submit-button/#post-5485416) * Also, can tell me how to make my CF7 text fields longer on a cell phone? Changing them thru the Generate Tag option seems to have no affect on the mobile version of [my site](http://myestatesale.com/site1) Viewing 9 replies - 1 through 9 (of 9 total) The topic ‘Custom CSS for Submit Button’ is closed to new replies. *  * [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/) ## Tags * [class](https://wordpress.org/support/topic-tag/class/) * [css](https://wordpress.org/support/topic-tag/css/) * [submit button](https://wordpress.org/support/topic-tag/submit-button/) * 9 replies * 4 participants * Last reply from: [Justin Dodson](https://wordpress.org/support/users/justin-dodson/) * Last activity: [11 years, 1 month ago](https://wordpress.org/support/topic/custom-css-for-submit-button/#post-5485416) * Status: not resolved