Submit Button CSS Selectors

Here’s how to apply styles to Gravity Forms submit buttons. You can utilize these selectors to apply any additional styling that you may need.

Basic Targeting

Submit Button

• example: the form submit button (input) – applies to all forms

      body .gform_wrapper .gform_footer input[type=submit] {border: 1px solid red}
      

• example: the form submit button (input) – applies just to form ID #1

      body #gform_wrapper_1 .gform_footer input[type=submit] {border: 1px solid red}
      

Submit Button (image)

• example: the form submit button (image) – applies to all forms

      body .gform_wrapper .gform_footer input[type=image] {border: 1px solid red}
      

• example: the form submit button (image) – applies just to form ID #1

      body #gform_wrapper_1 .gform_footer input[type=image] {border: 1px solid red}
      

Use Case Examples

Basic Example

body .gform_wrapper .gform_footer input.button,
body .gform_wrapper .gform_footer input[type=submit] {
    color:#ffffff;
    padding-top:4px;
    padding-bottom:4px;
    padding-left:10px;
    padding-right:10px;
    border: 1px solid rgba(114,114,114,0.4);
    border-radius: 1px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    box-shadow: 0 1px 0px rgba(114,114,114,0.3);
    -moz-box-shadow: 0 1px 0px rgba(114,114,114,0.3);
    -webkit-box-shadow: 0 1px 0px rgba(114,114,114,0.3);
    background-color: #0096d6;
}

Hover Example

body .gform_wrapper .gform_footer input[type=submit]:hover {
    border: 1px solid rgba(114,114,114,0.6);
    background-color: #444444;
}

Active State Example

body .gform_wrapper .gform_footer input[type=submit]:active {
    top: 1px;
}

Inline Positioning Of The Submit Button

/* make the form container relative for positioning */

body #gform_wrapper_1 {
    position: relative;
}

/* resize and position the form footer with the button */

body #gform_wrapper_1 .gform_footer {
    width: auto;
    position: absolute;
    top: 46px;
    left: 150px;
    padding: 0;
    margin: 0;
}

The post Submit Button CSS Selectors appeared first on Gravity Forms Documentation.