buttons.less

Sizes
Colors
States
Misc

Sizes

<button>...</button>

<button class="button-large">...</button>

<button class="button-small">...</button>

<button class="button-tiny">...</button>

Colors

<button>...</button>

<button class="button-primary">...</button>

<button class="button-warning">...</button>

<button class="button-danger">...</button>

<button class="button-success">...</button>

<button class="button-info">...o</button>

States

<button>...</button>

<button class="active">...</button>

<button disabled>...</button>

Fullwidth block button

Forces a button to be rendered like a block level element, covering the whole width & creates a float-break.

<button class="button-block button-warning">...</button>

<button class="button-block">...</button>

Button look for different HTML tags

The .button class creates a button-like design for HTML tags that are not true button elements.

link tag

<button>...</button>

<a class="button">...</a>

<input class="button" type="submit" value="input" />

Link-styled looking button

This class removes the default button look from the button-element and class.

<button class="button-link">...</button>

Chainable classes

All of the button classes work in combination:

small colored link block button

<a class="button button-block button-primary button-small">...</a>

<input class="button button-large button-link" type="submit" value="..." />

Buttons with icons

The button module can easily be combined with the icons module. Regular icon rules do apply.

<button class="button-success"><span class="icon-compass"></span> Icon</button>

<button class="button-large"><span class="icon-long-arrow-right"></span></button>