CSS Customizations for Buttons
Note: This page applies primarily to CSS in the classic form designer.
This topic introduces examples of common CSS customizations for buttons in a form. CSS customizations change only static properties like appearance and position. If you want to show or hide buttons based on other events that occur in the form, see JavaScript Customizations for Buttons.
<div class="btn-wrapper">
<input type="submit" class="action-btn checkRequired Submit" name="action"
aria-labelledby="action" value="Submit">
</div>
The Submit button typically has the type submit
. Other buttons, such as the Previous and Next buttons for paginated forms, typically have the type button
.
To alter a button's appearance and position, it is often necessary to target the button wrapper (in our snippet above, this would be the div element with class btn-wrapper
). The following examples demonstrate some common customizations for buttons.
Changing Button Positions
The following CSS rule-sets center the Submit button, which is left-aligned by default.
div.btn-wrapper {display:block}
.Submit {display:block; margin:auto}
As we saw in the HTML snippet above, the Submit button has the class Submit
. The second line of the CSS snippet targets the button using this class. The first line targets the button wrapper, using the fact that it is a div element with class btn-wrapper
.
Setting the display
property to block
means that the targeted element will take up the whole width of the page and cannot be displayed side-by-side with other elements. Setting the margin
property to auto
means that the targeted element is centered within its container.
To right-align a button instead, use the property float:right
rather than margin:auto
:
div.btn-wrapper {display:block}
.Submit {display:block; float:right}
The Previous and Next buttons are both contained within a div with the class cf-pagination-btn
. They are separated from each other by a spacer. You would use div.cf-pagination-btn
to target their container, div.cf-pagination-btn-spacer
to target the spacer, .cf-prev-btn
to target the Previous button, and .cf-next-btn
to target the Next button.
Changing Button Appearance
You can change the colors of a button using CSS. Here we show you how to do this for the file upload button, which has the class fileuploader
. The property background-color
sets the background color of the button. border-color
sets the color of the button's border. color
sets the color of the button's text. We change all three of these colors in this snippet:
.fileuploader {background-color:#2ab;
border-color:#2bc!important;
color:white;}
The above snippet changes the colors of all file upload buttons on your form, as it targets the class fileuploader
, to which all file upload buttons belong. To change the file upload button for a particular field only, use your browser to determine the id of the file upload button. In the following snippet, we assume that the id is Field60
:
input#Field60.fileuploader {
background-color:#2ab;
border-color:#2bc!important;
color:white;}