Button

A button is a graphic used to direct users’ attention to a task or action by hyperlinking to relevant information. They are also known as calls-to-action, or CTAs. They are pill-shaped and either compliment or contrast with the primary color of the site or app.

Usage

Use buttons to encourage users to begin or complete a task. While well-written text is central to the success of this component, pair the button with a command for maximum impact.

Examples

A call to action is a suggestion to a user that they engage in a task or initiate a process. The best examples of calls to action are imperative sentences that implore users to act.

Sample blue buttons with white text displaying a call to action
Default, secondary, disabled, and hover states of a call-to-action button

Primary

Button label

Secondary

Disable

<style type="text/css">.blue_btn_grid h4 {<style type="text/css">.blue_btn_grid h4 { text-align: center; }  .blue_btn_grid { text-align: center; } .btn {width: 100%;margin-top: 25px;}
</style>
<div class="container blue_btn_grid">
<div class="row">
<div class="col-sm-4">
<h4>Primary</h4>
<a aria-pressed="true" class="btn btn-primary btn-lg active" href="#" role="button">Button label</a><button class="btn btn-primary btn-lg" type="button">Button label</button></div>

<div class="col-sm-4">
<h4>Secondary</h4>
<button class="btn btn-dark btn-lg" type="button">Default</button><button class="btn btn-secondary btn-lg" type="button">Hover</button></div>

<div class="col-sm-4">
<h4>Disable</h4>
<button class="btn btn-secondary btn-lg" disabled="disabled" type="button">Default</button><button class="btn btn-light btn-lg" type="button">Hover</button></div>
</div>
</div>