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
<style type="text/css">
.btn {
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: normal;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    user-select: none;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
}
.btn:hover, 
.btn:focus {
    color: #333;
    text-decoration: none;
}
.btn:disabled {
    color: #555555;
    background-color: #dddddd;
    border-color: #555555;
}
.btn-primary {
  color: #fff;
  background-color: #337ab7;
  border-color: #2e6da4;
}
.btn-primary:hover {
    color: #fff;
    background-color: #286090;
    border-color: #204d74;
}
.btn-primary:focus {
  color: #fff;
}
.btn-primary:active {
    color: #fff;
    background-color: #337ab7;
    border-color: #2e6da4;
}
.btn-secondary {
  color: #fff;
  background-color: #555555;
  border-color: #555555;
}
.btn-secondary:hover {
    color: #fff;
    background-color: #777777;
    border-color: #555555;
}
.btn-secondary:focus {
  color: #fff;
}
.btn-secondary:active {
  color: #fff;
  background-color: #555555;
  border-color: #555555;
}

.btn-lg {
  padding: 10px 16px;
  font-size: 18px;
  line-height: 1.3333333;
  border-radius: 6px;
}

</style>
<button class="btn btn-primary">Primary Button</button>
<button class="btn btn-primary" disabled="disabled">Primary Disabled</button>
<button class="btn btn-lg btn-primary">Primary Large</button>
<p>&nbsp;</p>
<button class="btn btn-secondary">Secondary Button</button>
<button class="btn btn-secondary" disabled="disabled">Secondary Disabled</button>
<button class="btn btn-lg btn-secondary">Secondary Large</button>