11 #Buttons Buttons
btn
The button classes work on <a>, <button>, or <input> elements. Favor use of the default button styling in most cases; only use the modifier classes when you need the button to standout among other buttons.
Examples
Default styling
:focus
Focused
:hover
Hovered
:active
Active (clicked)
disabled
Disabled
<button class="btn [modifier class]">Button</button>
Example
Show Markup
<a href="section-buttons.html" class="btn">Link</a>
<button class="btn">Button</button>
<input type="button" class="btn" value="Input">
<input type="submit" class="btn" value="Submit">
Example
<div class="btn-group">
<button class="btn">Button</button>
<button class="btn">Button</button>
<button class="btn">Button</button>
</div>11.2 #Buttons.Icons Icon buttons
Example
<button class="icon-button">
<span class="sr-only">edit</span>
<i class="sprite-edit"></i>
</button>11.3 #Buttons.Inverse Inverse button
btn-inverse
Use to make a button white against a dark background.
Examples
Default styling
btn-info
info
btn-warning
warning
btn-danger
danger
btn-success
success
<button class="btn btn-inverse [modifier class]">Click</button>
<span class="inverse">
<button class="btn [modifier class]">Click</button>
</span>11.4 #Buttons.Link Link button
btn-link
Make a button look and behave like a link. Use this instead of <a href="#">, when clicking initiates some JavaScript behavior.
Example
This is a , which looks just like a regular link.
<p>This is a <button class="btn btn-link">link button</button>,
which looks just like a <a href="/">regular link</a>.</p>11.5 #Buttons.Loading Loading State
Example
<button class="btn is-loading">Save</button>
Example
Show Markup
<button class="btn btn-info is-loading">Save</button>
<button class="btn btn-success is-loading">Save</button>
<button class="btn btn-warning is-loading">Save</button>
<button class="btn btn-danger is-loading">Save</button>
<button disabled class="btn is-loading">Save</button>11.6 #Buttons.More “More” Button
btn-more
Add the class btn-more to add a chevron icon to the button, indicating the user can read further on a subject by clicking the button. This works in conjunction with any of the button styles above, as well as regular links.
Example
<button class="btn btn-more">Learn more</button>
<br><br>
<button class="btn btn-back">Back</button>
Example
Show Markup
<a href="/" class="btn-more">Works with links</a>
<br><br>
<a href="/" class="btn-back">Works with links</a>11.7 #Buttons.Variants Button Variants
Examples
Default styling
btn-secondary
btn-warning Secondary action; or to indicate caution
btn-success
Use for save or proceed
btn-info
A neutral or innocuous action
btn-danger
Indicate the button performs a potentially dangerous action, such as deleting
btn-simple
De-emphesize the button. Use for less important actions when you have multiple buttons together. (can be mixed with other types above)
<button class="btn [modifier class]">Click here</button>
<div class="inverse" style="background-color: #333; padding: 0.5em">
<button class="btn [modifier class]">Click here</button>
</div>