kss-bootstrap/styleguide/css/button/button.css

A KSS template and style guide for Bootstrap.

/*
Buttons

Use the button classes on an <code>&lt;a&gt;</code>, <code>&lt;button&gt;</code>, or <code>&lt;input&gt;</code> element.

Markup:
<button type="button" class="btn {{modifier_class}}">Button</button>

.btn-default - Default
.btn-success - Success
.btn-info - Info
.btn-warning - Warning
.btn-danger - Danger
.btn-link - Link

Weight: 6

Styleguide: bootstrap.css.button
*/

/*
Sizes

Fancy larger or smaller buttons? Add <code>.btn-lg</code>, <code>.btn-sm</code>, or <code>.btn-xs</code> for additional sizes.

Markup:
<button type="button" class="btn {{modifier_class}}">Button</button>

.btn-lg - Large
.btn-sm - Small
.btn-xs - Extra small

Styleguide: bootstrap.css.button.sizes
*/

/*
Active State

Buttons will appear pressed (with a darker background, darker border, and inset shadow) when active. For <code>&lt;button</code> elements, this is done via <code>:active</code>. For <code>&lt;a&gt;</code> elements, it's done with <code>.active</code>. However, you may use <code>.active</code> on <code>&lt;button&gt;</code>s (and include the <code>aria-pressed="true"</code> attribute) should you need to replicate the active state programmatically.

Styleguide: bootstrap.css.button.activestate
*/

/*
Button Element

No need to add <code>:active</code> as it's a pseudo-class, but if you need to force the same appearance, go ahead and add <code>.active</code>.

Markup:
<button type="button" class="btn btn-primary btn-lg active">Primary button</button>
<button type="button" class="btn btn-default btn-lg active">Button</button>

Styleguide: bootstrap.css.button.activestate.button
*/

/*
Anchor Element

Add the <code>.active</code> class to <code>&lt;a&gt;</code> buttons.

Markup:
<a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg active" role="button">Link</a>

Styleguide: bootstrap.css.button.activestate.anchor
*/

/*
Disabled State

Make buttons look unclickable by fading them back with <code>opacity</code>.

Styleguide: bootstrap.css.button.disabledstate
*/

/*
Button Element

Add the <code>disabled</code> attribute to <code>&lt;button&gt;</code> buttons.

Markup:
<button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button>
<button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button>

Styleguide: bootstrap.css.button.disabledstate.button
*/

/*
Anchor Element

Add the <code>.disabled</code> class to <code>&lt;a&gt;</code> buttons.

Markup:
<a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg disabled" role="button">Link</a>

Styleguide: bootstrap.css.button.disabledstate.anchor
*/