### Flat Buttons

- press me
- press me
- press me
- press me
- press me
- press me

- press me
- press me
- press me
- press me
- press me
- press me

- press me
- press me
- press me
- press me
- press me
- press me

- press me
- press me
- press me
- press me
- press me
- press me

    <a href="#" class="button button-rounded button-flat-primary">press me</a>
    <a href="#" class="button button-pill button-flat-primary">press me</a>
    <a href="#" class="button button-flat-primary">press me</a>
    <a href="#" class="button button-circle button-flat-primary">press me</a>

### Icon Buttons (icons provided by Font Awesome)

- press me
- press me
- press me
- press me
- press me
- press me

    <a href="#" class="button button-rounded button-flat"><i class="fa fa-github"></i> press me</a>
    <a href="#" class="button button-rounded button-flat-primary"><i class="fa fa-refresh"></i> press me</a>
    <a href="#" class="button button-rounded button-flat-action"><i class="fa fa-cloud"></i> press me</a>
    <a href="#" class="button button-rounded button-flat-highlight"><i class="fa fa-camera"></i> press me</a>
    <a href="#" class="button button-rounded button-flat-caution"><i class="fa fa-code"></i> press me</a>
    <a href="#" class="button button-rounded button-flat-royal"><i class="fa fa-download"></i> press me</a>

### Glow Buttons

- press me
- press me
- press me
- press me
- press me
- press me

    <a href="#" class="button glow button-rounded button-flat">press me</a>
    <a href="#" class="button glow button-rounded button-flat-primary">press me</a>
    <a href="#" class="button glow button-rounded button-flat-action">press me</a>
    <a href="#" class="button glow button-rounded button-flat-highlight">press me</a>
    <a href="#" class="button glow button-rounded button-flat-caution">press me</a>
    <a href="#" class="button glow button-rounded button-flat-royal">press me</a>

### Rounded Buttons

- press me
- press me
- press me
- press me
- press me
- press me

    <a href="#" class="button button-rounded">press me</a>
    <a href="#" class="button button-rounded button-primary">press me</a>
    <a href="#" class="button button-rounded button-action">press me</a>
    <a href="#" class="button button-rounded button-highlight">press me</a>
    <a href="#" class="button button-rounded button-caution">press me</a>
    <a href="#" class="button button-rounded button-royal">press me</a>

### Pill Buttons

- press me
- press me
- press me
- press me
- press me
- press me

    <a href="#" class="button button-pill">press me</a>
    <a href="#" class="button button-pill button-primary">press me</a>
    <a href="#" class="button button-pill button-action">press me</a>
    <a href="#" class="button button-pill button-highlight">press me</a>
    <a href="#" class="button button-pill button-caution">press me</a>
    <a href="#" class="button button-pill button-royal">press me</a>

### Border Buttons

- press me
- press me
- press me
- press me
- press me
- press me

    <a href="#" class="button button-border">press me</a>
    <a href="#" class="button button-border-primary button-rounded">press me</a>
    <a href="#" class="button button-border-action button-pill">press me</a>
    <a href="#" class="button button-border-highlight button-circle">press me</a>
    <a href="#" class="button button-border-caution"><i class="fa fa-camera"></i> press me</a>
    <a href="#" class="button button-border-royal">press me</a>

### 3D Buttons

- press me
- press me
- press me
- press me
- press me
- press me

    <a href="#" class="button button-3d">press me</a>
    <a href="#" class="button button-3d-primary button-rounded">press me</a>
    <a href="#" class="button button-3d-action button-pill">press me</a>
    <a href="#" class="button button-3d-highlight button-circle">press me</a>
    <a href="#" class="button button-3d-caution"><i class="fa fa-camera"></i> press me</a>
    <a href="#" class="button button-3d-royal">press me</a>

### Square Buttons

- press me
- press me
- press me
- press me
- press me
- press me

    <a href="#" class="button">press me</a>
    <a href="#" class="button button-primary">press me</a>
    <a href="#" class="button button-action">press me</a>
    <a href="#" class="button button-highlight">press me</a>
    <a href="#" class="button button-caution">press me</a>
    <a href="#" class="button button-royal">press me</a>

### Circle Buttons

- press me
- press me
- press me
- press me
- press me
- press me

    <a href="#" class="button button-circle">press me</a>
    <a href="#" class="button button-circle button-primary">press me</a>
    <a href="#" class="button button-circle button-action">press me</a>
    <a href="#" class="button button-circle button-highlight">press me</a>
    <a href="#" class="button button-circle button-caution">press me</a>
    <a href="#" class="button button-circle button-royal">press me</a>

### Dropdown Buttons (Include jQuery & buttons.js)

- press me
  - Option 1
  - Option 2
  - Option 3
- press me
- press me
- press me
  - Option 1
  - Option 2
  - Option 3
- press me
  - Option 1
  - Option 2
  - Option 3
- press me
  - Option 1
  - Option 2
  - Option 3

    <span class="button-dropdown" data-buttons="dropdown">
        <a href="#" class="button button-rounded button-flat-primary"> press me <i class="fa fa-caret-down"></i></a>
        <ul>
             <li><a href="http://airwolfe.com">AirWolfe.com</a></li>
             <li><a href="http://twitter.com">Twitter</a></li>
             <li class="button-dropdown-divider"><a href="http://google.com">Google</a></li>
        </ul>
    </span>

    <span class="button-dropdown" data-buttons="dropdown">
        <a href="#" class="button button-rounded button-flat-primary"> press me <i class="fa fa-caret-down"></i></a>

        <!-- Dropdown Below Button -->
        <ul class="button-dropdown-menu-below">
             <li><a href="http://airwolfe.com">AirWolfe.com</a></li>
             <li><a href="http://twitter.com">Twitter</a></li>
             <li class="button-dropdown-divider"><a href="http://google.com">Google</a></li>
        </ul>
    </span>

    <span class="button-dropdown" data-buttons="dropdown">
        <a href="#" class="button button-rounded button-flat-primary"> press me <i class="fa fa-caret-down"></i></a>

        <!-- Dropdown Above Button -->
        <ul class="button-dropdown-menu-above">
             <li><a href="http://airwolfe.com">AirWolfe.com</a></li>
             <li><a href="http://twitter.com">Twitter</a></li>
             <li class="button-dropdown-divider"><a href="http://google.com">Google</a></li>
        </ul>
    </span>

### Block Buttons

press me
press me
press me
press me
press me
press me

    <a href="#" class="button button-block button-rounded button-primary button-large">press me</a>

### Button Sizes

- press me
- press me
- press me
- press me
- press me

    <a href="#" class="button button-rounded button-flat-primary button-large">press me</a>
    <a href="#" class="button button-rounded button-flat-primary">press me</a>
    <a href="#" class="button button-rounded button-flat-primary button-small">press me</a>
    <a href="#" class="button button-rounded button-flat-primary button-tiny">press me</a>

### Button Wrappers

- press me
- press me
- press me
- press me

    <span class="button-wrap"><a href="#" class="button button-circle">press me</a></span>
    <span class="button-wrap"><a href="#" class="button button-circle button-primary">press me</a></span>
    <span class="button-wrap"><a href="#" class="button button-pill ">press me</a></span>
    <span class="button-wrap"><a href="#" class="button button-pill button-primary">press me</a></span>

### Button Groups

    <div class="button-group">
        <button type="button" class="button">Option 1</button>
        <button type="button" class="button">Option 2</button>
        <button type="button" class="button">Option 3</button>
    </div>
    <div class="button-group">
        <button type="button" class="button button-primary">Option 1</button>
        <button type="button" class="button button-primary">Option 2</button>
        <button type="button" class="button button-primary">Option 3</button>
    </div>
    <div class="button-group">
        <button type="button" class="active button button-pill">Option 1</button>
        <button type="button" class="button button-pill">Option 2</button>
        <button type="button" class="button button-pill">Option 3</button>
    </div>
    <div class="button-group">
        <button type="button" class="button button-pill button-action">Option 1</button>
        <button type="button" class="button button-pill button-action">Option 2</button>
        <button type="button" class="button button-pill button-action">Option 3</button>
    </div>
    <div class="button-group">
        <button type="button" class="button button-rounded">Option 1</button>
        <button type="button" class="button button-rounded">Option 2</button>
        <button type="button" class="button button-rounded">Option 3</button>
    </div>
    <div class="button-group">
        <button type="button" class="button button-flat-primary">Option 1</button>
        <button type="button" class="button button-flat-primary">Option 2</button>
        <button type="button" class="button button-flat-primary">Option 3</button>
    </div>

### Form Elements Work Too

- press me

    <input type="submit" value="press me" class="button button-pill button-primary"/>
    <button class="button button-pill button-primary">press me</button>

    <!-- DISABLED BUTTONS -->
    <input  disabled type="submit"  value="press me" class="button button-pill button-primary"/>
    <button disabled class="button  button-pill button-primary">press me</button>
    <a href="#" class="button disabled button-pill button-primary">press me</a>

## Getting Started

### Setup Buttons

1. Download Buttons and add files to your website.
2. Add css in the head of your webpage.

       <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
       <link rel="stylesheet" href="css/buttons.css">

       <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
       <script type="text/javascript" src="js/buttons.js"></script>

   * You only need the font-awesome css if you're using icons
   * You only need jquery & buttons.js if you're using dropdown buttons
3. Create buttons in your html.

### Customize Buttons

1. Fork or Download the Buttons project on github.
2. Make sure you have Sass and Compass installed.
3. Edit the _options.scss with your own custom values
4. In the root of the Buttons directory type compass watch on the command line.
5. The buttons.css file should now be updated