Button CTAs

Default Buttons

Buttons on a dark background

Button variations - dark background - dark class on container

Legacy button styles

Legacy Button Styles for existing rich text content

Primary / Heavy CTA Primary / Heavy CTA Blue Secondary / Medium CTA Secondary / Medium CTA Blue Secondary / Medium CTA Red

Legacy Button Styles for existing rich text content on dark

Primary / Heavy CTA Primary / Heavy CTA Blue Secondary / Medium CTA Secondary / Medium CTA Blue Secondary / Medium CTA Red

Button states

Heavy CTA button styles

Primary button styles

Secondary (blue outline) button styles

Secondary (red outline) button styles

Secondary (black outline) button styles

Link button (default)

Link button (black)

Code Snippets

Button Examples

  <div class="pf-l-grid pf-m-gutter">
  <div class="pf-l-grid__item pf-m-10-col pf-m-offset-1-col-on-md pf-u-p-md" style="border: 1px dashed #ddd;">
    <button class="pf-c-button pf-m-heavy">Heavy</button>
    <button class="pf-c-button pf-m-primary">Primary</button>
    <button class="pf-c-button pf-m-secondary">Secondary (blue)</button>
    <button class="pf-c-button pf-m-secondary-alt">Secondary (red)</button>
    <button class="pf-c-button pf-m-tertiary">Secondary (black)</button>
    <button class="pf-c-button pf-m-link">
      Link button (blue)
      <span class="pf-c-button__icon"><i class="fas fa-arrow-right" aria-hidden="true"></i></span>
    </button>
    <button class="pf-c-button pf-m-link--secondary">
      Link button (black)
      <span class="pf-c-button__icon"><i class="fas fa-arrow-right" aria-hidden="true"></i></span>
    </button>
  </div>
</div>

Edit this page -->