Basic TargetingSubmit ButtonSubmit Button (image)Use Case ExamplesBasic ExampleHover ExampleActive State ExampleInline Positioning Of The Submit Button
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;
}