Buttons are used to trigger action. They can be used to help a user navigate to a new page or submit information that that they've entered into a form. From a UI/UX perspective, we've styled these so that they correlate with the ACS brand guidelines, but also so that they appear to be "actionable" for users who encounter them on one of our websites or applications.

When words are not enough, icons can be used alongside buttons to further enhance the experience for our users. Text labels on buttons should be more contextually descriptive and avoid using “Learn more” as this often provides a less than ideal experience for those who may be using screen readers.

Buttons | Button Definitions Sass file:/sass/_acs-buttons.scss

Use the button classes on an <a>, <button>, or <input> element.

Link
<a class="btn btn-default" href="#" role="button">Link</a> <button class="btn btn-default" type="submit">Button</button> <input class="btn btn-default" type="button" value="Input"> <input class="btn btn-default" type="submit" value="Submit">

Buttons | Button Types Sass file:/sass/_acs-buttons.scss

Primary Button (Yellow) is the strongest call to action on a page

The prominent color provides extra visual weight and identifies as the primary action button. The yellow primary button works especially well against dark backgrounds.

Large Primary Button  Default Primary Button  Small Primary Button  XS Primary Button
<a href="#" class="btn btn-yellow">Yellow Primary Button</a>
HEX: #FDD941

Primary Button (Blue) is the strongest call to action on a page

The prominent color provides extra visual weight and identifies as the primary action button. The blue primary button works especially well against light backgrounds and ideal for applications.

Large Primary Button  Default Primary Button  Small Primary Button  XS Primary Button

<a href="#" class="btn btn-primary">Blue Primary Button</a>
HEX: #0068FF

Secondary Button is for secondary action on each page

This provides extra visual weight and identifies as the secondart action button. When use for call-to-action, this should not considered as the most important if there are more than one CTA.

Large Secondary Button Default Secondary Button  Small Secondary Button  XS Secondary Button
<a href="#" class="btn btn-secondary">Secondary Button</a>
HEX: #262525

Link Button

A link with some visual weight that is not a primary or secondary action button

Large Link Button  Default Link Button  Small Link Button  XS Link Button
<a href="#" class="btn btn-link">Link Button</a>
HEX: #000 (text/border)

Inverted Link Button

Same use case of regular Link Button, the Inverted Link Button is ideal against dark background usage.
*Note: This CSS class have not official add to the ACS-Bootstrap yet.

Large Link Button  Default Link Button  Small Link Button  XS Link Button
<a href="#" class="btn btn-link-inverted">Inverted Link Button</a>
HEX: #FFFFFF (text/border)

Buttons | Button Sizes Sass file:/sass/_acs-buttons.scss

<a href="#" class="btn btn-lg">Large Button</a>
  <a href="#" class="btn">Default Button</a>
  <a href="#" class="btn btn-sm">Small Button</a>
  <a href="#" class="btn btn-xs">Extra Small Button</a>

Button Block

Create block level buttons—those that span the full width of a parent— by adding .btn-block.

<button type="button" class="btn btn-primary btn-block">Block level button</button>
  <button type="button" class="btn btn-link btn-block">Block level button</button>

Button | Button States Sass file:/sass/_acs-buttons.scss

<a href="#" class="btn btn-default" disabled="disabled">Disabled Button</a>