Buttons

Example

Primary Button

Link as Button

Save and Continue

Secondary Button

Large Button

Destructive Button

Anchor Button

Disabled Button

Button as a Link

Icon Button

Add to Calendar

Watch live stream

Watch live stream

Code

HTML

<button>Save and Continue</button>

<a href="http://cfainstitute.org" class="button">Save and Continue</a>

<button class="secondary">Save and Continue</button>

<button class="large">Save and Continue</button>

<button class="destructive">Discard Changes</button>

<button class="anchor">Learn more</button>

<input type="submit" class="button" disabled="disabled" value="Submit" />

<button class="link">Learn more</button>

<button class="icon"></button>

<button class="secondary"><span class="pe-7s-date"></span>Add to Calendar</button>

<a href="#" class="button play-media"><i class="cfaicon-play_button"></i>Watch live stream</a>
                

Documentation

Problem Being Solved

Users need to interact with content on a page, or navigate to a different page.

When To Use

Roughly, buttons that look like buttons should be used when the user needs to do something (ex., submit a form). Buttons that look like links, or the icon button, should be used when the user needs to go somewhere.

When Not To use

Buttons should not be used to contain content. They should not be used when most users would expect a different kind of control.

Formatting

For accessibility, all buttons and links should have visible focus.