Title: CF7 Submit Button Size/Styling
Last modified: January 5, 2021

---

# CF7 Submit Button Size/Styling

 *  Resolved [jmccrone](https://wordpress.org/support/users/jmccrone/)
 * (@jmccrone)
 * [5 years, 4 months ago](https://wordpress.org/support/topic/cf7-submit-button-size-styling/)
 * Want a CF7 form with three text fields and the submit button all on one line.
   Used your plugin to layout the grid. Added some custom CSS to reduce some of 
   the column margins and padding so everything was tighter. Only issue I’m having
   is with the Submit button. It’s huge and I want the button to be same height 
   and align with the text boxes. Tried to add custom CSS for this which resized
   it but the button text is no longer centered. Is there another way I need to 
   resize the submit button to override the CSS?
 * Thanks
 * .cf7sg-container .cf7-smart-grid.has-grid .wpcf7-submit
    { color:#ffffff; background:#
   000000; font-size: 12px; border-radius: 0px; height: 40px!important; }
 * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fcf7-submit-button-size-styling%2F%3Foutput_format%3Dmd&locale=en_US)
   to see the link]_

Viewing 1 replies (of 1 total)

 *  Plugin Author [Aurovrata Venet](https://wordpress.org/support/users/aurovrata/)
 * (@aurovrata)
 * [5 years, 4 months ago](https://wordpress.org/support/topic/cf7-submit-button-size-styling/#post-13871469)
 * >  Only issue I’m having is with the Submit button
 * the plugin doesn’t style your, it only affects the layout. The button style on
   your form is coming from your theme.
 * > Tried to add custom CSS for this which resized it but the button text is no
   > longer centered. Is there another way I need to resize the submit button to
   > override the CSS?
 * it is being set by your theme, and this is the rule you need to override,
 *     ```
       .button, [type="submit"], .comment-form [type="submit"] {
       	-webkit-appearance: none;
       	border-radius: 0;
       	cursor: pointer;
       	display: inline-block;
       	font-family: "catamaran", "hind_vadodara", Helvetica, Roboto, Arial, sans-serif;
       	height: 60px;
       	letter-spacing: 1px;
       	line-height: 60px;
       	text-align: center;
       	-webkit-transition: background-color 0.25s ease-out, color 0.25s ease-out;
       	-o-transition: background-color 0.25s ease-out, color 0.25s ease-out;
       	transition: background-color 0.25s ease-out, color 0.25s ease-out;
       	vertical-align: middle;
       }
       ```
   
 * the line-height and the height directive

Viewing 1 replies (of 1 total)

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

 * ![](https://ps.w.org/cf7-grid-layout/assets/icon-256x256.png?rev=1834229)
 * [Smart Grid-Layout Design for Contact Form 7](https://wordpress.org/plugins/cf7-grid-layout/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/cf7-grid-layout/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/cf7-grid-layout/)
 * [Active Topics](https://wordpress.org/support/plugin/cf7-grid-layout/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/cf7-grid-layout/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/cf7-grid-layout/reviews/)

 * 1 reply
 * 2 participants
 * Last reply from: [Aurovrata Venet](https://wordpress.org/support/users/aurovrata/)
 * Last activity: [5 years, 4 months ago](https://wordpress.org/support/topic/cf7-submit-button-size-styling/#post-13871469)
 * Status: resolved