We're using cookies, but you can turn them off in Privacy Settings. If you use the site without changing settings, you are agreeing to our use of cookies. Learn more in our Privacy Policy.


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


<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>

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.


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