Bootstrap: Buttons

Colors

To style a button use the bsStyle attribute. More colors are available (Check the colors.scss file for more).

<Button>Default</Button>
<Button bsStyle='primary'>Primary</Button>
<Button bsStyle='success'>Success</Button>
<Button bsStyle='info'>Info</Button>
<Button bsStyle='warning'>Warning</Button>
<Button bsStyle='danger'>Danger</Button>
<Button bsStyle='link'>Link</Button>

Sizes

Fancy larger or smaller buttons? Add lg, sm or xs attribute for additional sizes.

<p>
  <Button lg bsStyle='primary'>Large Button</Button>
</p>
<p>
  <Button bsStyle='primary'>Default Button</Button>
</p>
<p>
  <Button sm bsStyle='primary'>Small Button</Button>
</p>
<p>
  <Button xs bsStyle='primary'>Extra small Button</Button>
</p>

Blocks

Create block level buttons—those that span the full width of a parent— by adding block

<p>
  <Button lg block bsStyle='primary'>Large Block Level Button</Button>
</p>

Active State

Buttons will appear pressed (with a darker background, darker border, and inset shadow) when active

<p>
  <Button lg bsStyle='primary'>Normal Button</Button>{' '}
  <Button lg bsStyle='primary' active>Active Button</Button>
</p>

Disabled State

Make buttons look unclickable by fading them back 50%.

<p>
  <Button lg bsStyle='primary'>Normal Button</Button>{' '}
  <Button lg bsStyle='primary' disabled>Disabled Button</Button>
</p>

Bootstrap: Rubix Enhancements

Outlined

Outlined button.

<Button bsStyle='darkgreen45' outlined>45% Dark Green Button</Button>

Inverse

Inverse foreground/background colors.

<Button bsStyle='desaturateddarkblue75' inverse>75% Desaturated Dark Blue</Button>

Rounded

Rounded button.

<Button bsStyle='green' rounded><Icon glyph='icon-fontello-mail' /></Button>{' '}
<Button bsStyle='blue' rounded><Icon glyph='icon-fontello-rss-1' /></Button>{' '}
<Button bsStyle='red' rounded><Icon glyph='icon-fontello-cog' /></Button>

Only Activate styles on Hover/Focus

Add styles only on button hover/focus.

<Button bsStyle='pink' onlyOnHover>Pink Button (only on hover)</Button>

Retain Background

Outlined white border and color in the default state but behaves like non-outlined, colored background + border and white foreground on hover/focused state.

<Button bsStyle='darkcyan' retainBackground>Dark Cyan Button</Button>