Buttons

Buttons can be created by adding .btn class to a link or button element. By it's self the .btn class does not do much besides create some basic structure. To apply styles to the button we need to add an extender class like .btn-default or .btn-primary

Links as Buttons

.btn .btn .btn-default .btn .btn-primary .btn .btn-highlight .btn .btn-secondary .btn .btn-standout

Buttons as Buttons

Source Code:

For webmasters needing to add application behavior there are a few additional classes that might be useful. .active will make buttons appear pressed.

Links as Active Buttons

.btn .btn-default .active .btn .btn-primary .active .btn .btn-highlight .active .btn .btn-secondary .active .btn .btn-standout .active

Buttons as Active Buttons

Source Code:

Add the .disabled class to make buttons appear unclickable by fading them back 50%. Add the disabled="disabled" attribute to <button> buttons instead of the class.

Links as Disabled Buttons

NOTE: This class will only change the <a>'s appearance, not its functionality. Use custom JavaScript to disable links.

.btn .btn-default .disabled .btn .btn-primary .disabled .btn .btn-highlight .disabled .btn .btn-secondary .disabled .btn .btn-standout .disabled

Buttons as Disabled Buttons

NOTE: If you add the disabled attribute to a <button>, Internet Explorer 9 and below will render text gray with a not so pretty text-shadow that cannot be fixed.

Source Code:

<h2>Links as Disabled Buttons</h2>
<p><span class="label label-info">NOTE:</span> This class will only change the <code><a></code>'s appearance, not its functionality. Use custom JavaScript to disable links.</p>
<div class="btn-row">
    <a class="btn btn-default disabled" role="button">.btn .btn-default .disabled</a>
    <a class="btn btn-primary disabled" role="button">.btn .btn-primary .disabled</a>
    <a class="btn btn-highlight disabled" role="button">.btn .btn-highlight .disabled</a>
    <a class="btn btn-secondary disabled" role="button">.btn .btn-secondary .disabled</a>
    <a class="btn btn-standout disabled" role="button">.btn .btn-standout .disabled</a>
</div>
    <h2>Buttons as Disabled Buttons</h2>
<div class="btn-row">
    <p><span class="label label-info">NOTE:</span> If you add the <code>disabled</code> attribute to a <code><button></code>, Internet Explorer 9 and below will render text gray with a not so pretty text-shadow that cannot be fixed.</p>
    <button class="btn btn-default" disabled="disabled">.btn .btn-default</button>
    <button class="btn btn-primary" disabled="disabled">.btn .btn-primary</button>
    <button class="btn btn-highlight" disabled="disabled">.btn .btn-highlight</button>
    <button class="btn btn-secondary" disabled="disabled">.btn .btn-secondary</button>
    <button class="btn btn-standout" disabled="disabled">.btn .btn-standout</button>
</div>