<button>...</button> <button class="button-large">...</button> <button class="button-small">...</button> <button class="button-tiny">...</button>
<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>
<button>...</button> <button class="active">...</button> <button disabled>...</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>
The .button class creates a button-like design for HTML tags that are not true button elements.
<button>...</button> <a class="button">...</a> <input class="button" type="submit" value="input" />
This class removes the default button look from the button-element and class.
<button class="button-link">...</button>
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="..." />
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>