Button

Easily create nicely looking buttons, which come in different styles.


Usage

To apply this component, add the .button class to an <a> or <button> element.

Add the [disabled] attribute to a <button> or the .disabled class to an <a> element to disable the button.

Usage

  • Class Description
    .button The base class for a Button component.

    Sub Objects

    Class Description
    .button-group Add this class to an element that wraps a group of buttons.

    Modifiers

    Class Description
    .button-block Applies display: block; CSS property to expand the button to the width of it's container.
    .button-primary A color modifier - give the button the "primary" color pallete.
    .button-success A color modifier - give the button the "success" color pallete
    .button-danger A color modifier - give the button the "danger" color pallete
    .button-link Removes all aesthetic style from the element, leaving only the structural CSS.
    .button-mini A size modifier - shrinks the button to the smallest size.
    .button-small A size modifier - shrinks the button to a smaller-than-normal.
    .button-large A size modifier - grows the button to a larger size.

    States

    Class Description
    .active Applies the CSS properties expressed during the state in which a button is pressed.
    .disabled Indicates that the button is disabled.
  • Link
  • <a class="button" href="#">Link</a>
    <button class="button">Button</button>
    <button class="button active">Active</button>
    <button class="button disabled" disabled>Disabled</button>

Sub Objects

To create a button group, add the .button-group class to a <div> element around the buttons. That's it! No further markup needed.

Usage

  • Link
  • <div class="button-group">
    	<button class="button">Button</button>
    	<button class="button">Button</button>
    	<button class="button">Button</button>
    </div>

Modifiers

Button Block

Add the .button-block class to a Button component to expand it to the width of it's container.

Usage

  • <button class="button button-block">Button Block</button>

Color Modifiers

There are several color modifiers available. Apply the following classes to achieve a different look.

Usage

  • <button class="button button-primary">Button Primary</button>
    <button class="button button-success">Button Success</button>
    <button class="button button-danger">Button Danger</button>
    <button class="button button-link">Button Link</button>

Size Modifiers

Use the size modifier classes to alter the size of a button while maintaining consistent theme style.

Usage

  • <button class="button button-mini">Button Mini</button>
    <button class="button button-small">Button Small</button>
    <button class="button button-large">Button Large</button>