Breadcrumbs

Large Button Styles

Make buttons larger, for example on forms that people complete on tablets or touch screens.

  1. Add this CSS to the form. See Using Custom CSS, Option A:

    HTML
    <style>
  .btn-xlarge .btn {
    padding: 28px 85px;
    font-size: 22px;
    line-height: normal;
    border-radius: 8px;
  }
</style>

  2. On each button that should be larger, enter btn-xlarge in Custom CSS Class on the Display tab.

  3. Open the form's view link to see the result.

A normal Check in button next to a much larger Check in button with rounded corners
A normal button, and the same button with btn-xlarge

To change a button's color, use Component Colors instead of CSS.