View on GitHub

Buttons

On this page

Examples

html

<button type="button" class="btn btn-primary btn-borderless">Borderless</button>

<button type="button" class="btn btn-primary btn-square">Square</button>

<button type="button" class="btn btn-more">More</button>

Pill Buttons

Add .btn-pill to any button to make them more rounded.

html

<button type="button" class="btn btn-lg btn-pill btn-primary">Primary</button>
<button type="button" class="btn btn-lg btn-pill btn-secondary">Secondary</button>
<button type="button" class="btn btn-lg btn-pill btn-success">Success</button>
<button type="button" class="btn btn-lg btn-pill btn-info">Info</button>
<button type="button" class="btn btn-lg btn-pill btn-warning">Warning</button>
<button type="button" class="btn btn-lg btn-pill btn-danger">Danger</button>

<button type="button" class="btn btn-lg btn-pill btn-link">Link</button>

html

<button type="button" class="btn btn-pill btn-primary">Primary</button>
<button type="button" class="btn btn-pill btn-secondary">Secondary</button>
<button type="button" class="btn btn-pill btn-success">Success</button>
<button type="button" class="btn btn-pill btn-info">Info</button>
<button type="button" class="btn btn-pill btn-warning">Warning</button>
<button type="button" class="btn btn-pill btn-danger">Danger</button>

<button type="button" class="btn btn-pill btn-link">Link</button>

html

<button type="button" class="btn btn-sm btn-pill btn-primary">Primary</button>
<button type="button" class="btn btn-sm btn-pill btn-secondary">Secondary</button>
<button type="button" class="btn btn-sm btn-pill btn-success">Success</button>
<button type="button" class="btn btn-sm btn-pill btn-info">Info</button>
<button type="button" class="btn btn-sm btn-pill btn-warning">Warning</button>
<button type="button" class="btn btn-sm btn-pill btn-danger">Danger</button>

<button type="button" class="btn btn-sm btn-pill btn-link">Link</button>

html

<button type="button" class="btn btn-xs btn-pill btn-primary">Primary</button>
<button type="button" class="btn btn-xs btn-pill btn-secondary">Default</button>
<button type="button" class="btn btn-xs btn-pill btn-success">Success</button>
<button type="button" class="btn btn-xs btn-pill btn-info">Info</button>
<button type="button" class="btn btn-xs btn-pill btn-warning">Warning</button>
<button type="button" class="btn btn-xs btn-pill btn-danger">Danger</button>

<button type="button" class="btn btn-xs btn-pill btn-link">Link</button>

CSS

Sass variables

$btn-text-transform:     none;
$btn-letter-spacing:     normal;

$btn-more-top:           1px;
$btn-more-padding-left:  $spacer * .3;

$btn-pill-padding-x:     1.25rem;