Buttons

A CSS button library built with Sass & Compass

Download

Flat Buttons

  1. <a href="#" class="button button-rounded button-flat-primary">press me</a>
  2. <a href="#" class="button button-pill button-flat-primary">press me</a>
  3. <a href="#" class="button button-flat-primary">press me</a>
  4. <a href="#" class="button button-circle button-flat-primary">press me</a>

Icon Buttons (icons provided by Font Awesome)

  1. <a href="#" class="button button-rounded button-flat"><i class="icon-github"></i></i> press me</a>
  2. <a href="#" class="button button-rounded button-flat-primary"><i class="icon-refresh"></i> press me</a>
  3. <a href="#" class="button button-rounded button-flat-action"><i class="icon-cloud"></i> press me</a>
  4. <a href="#" class="button button-rounded button-flat-highlight"><i class="icon-camera"></i> press me</a>
  5. <a href="#" class="button button-rounded button-flat-caution"><i class="icon-code"></i> press me</a>
  6. <a href="#" class="button button-rounded button-flat-royal"><i class="icon-envelope-alt"></i> press me</a>

Glow Buttons

  1. <a href="#" class="button glow button-rounded button-flat">press me</a>
  2. <a href="#" class="button glow button-rounded button-flat-primary">press me</a>
  3. <a href="#" class="button glow button-rounded button-flat-action">press me</a>
  4. <a href="#" class="button glow button-rounded button-flat-highlight">press me</a>
  5. <a href="#" class="button glow button-rounded button-flat-caution">press me</a>
  6. <a href="#" class="button glow button-rounded button-flat-royal">press me</a>

Rounded Buttons

  1. <a href="#" class="button button-rounded">press me</a>
  2. <a href="#" class="button button-rounded button-primary">press me</a>
  3. <a href="#" class="button button-rounded button-action">press me</a>
  4. <a href="#" class="button button-rounded button-highlight">press me</a>
  5. <a href="#" class="button button-rounded button-caution">press me</a>
  6. <a href="#" class="button button-rounded button-royal">press me</a>

Pill Buttons

  1. <a href="#" class="button button-pill">press me</a>
  2. <a href="#" class="button button-pill button-primary">press me</a>
  3. <a href="#" class="button button-pill button-action">press me</a>
  4. <a href="#" class="button button-pill button-highlight">press me</a>
  5. <a href="#" class="button button-pill button-caution">press me</a>
  6. <a href="#" class="button button-pill button-royal">press me</a>

Square Buttons

  1. <a href="#" class="button">press me</a>
  2. <a href="#" class="button button-primary">press me</a>
  3. <a href="#" class="button button-action">press me</a>
  4. <a href="#" class="button button-highlight">press me</a>
  5. <a href="#" class="button button-caution">press me</a>
  6. <a href="#" class="button button-royal">press me</a>

Circle Buttons

  1. <a href="#" class="button button-circle">press me</a>
  2. <a href="#" class="button button-circle button-primary">press me</a>
  3. <a href="#" class="button button-circle button-action">press me</a>
  4. <a href="#" class="button button-circle button-highlight">press me</a>
  5. <a href="#" class="button button-circle button-caution">press me</a>
  6. <a href="#" class="button button-circle button-royal">press me</a>

Dropdown Buttons (Include jQuery & buttons.js)

  1. <span class="button-dropdown" data-buttons="dropdown">
  2. <a href="#" class="button button-rounded button-flat-primary"> press me <i class="icon-caret-down"></i></a>
  3. <ul>
  4. <li><a href="http://airwolfe.com">AirWolfe.com</a></li>
  5. <li><a href="http://twitter.com">Twitter</a></li>
  6. <li class="button-dropdown-divider"><a href="http://google.com">Google</a></li>
  7. </ul>
  8. </span>
  9.  
  10. <span class="button-dropdown" data-buttons="dropdown">
  11. <a href="#" class="button button-rounded button-flat-primary"> press me <i class="icon-caret-down"></i></a>
  12.  
  13. <!-- Dropdown Below Button -->
  14. <ul class="button-dropdown-menu-below">
  15. <li><a href="http://airwolfe.com">AirWolfe.com</a></li>
  16. <li><a href="http://twitter.com">Twitter</a></li>
  17. <li class="button-dropdown-divider"><a href="http://google.com">Google</a></li>
  18. </ul>
  19. </span>
  20.  
  21. <span class="button-dropdown" data-buttons="dropdown">
  22. <a href="#" class="button button-rounded button-flat-primary"> press me <i class="icon-caret-down"></i></a>
  23.  
  24. <!-- Dropdown Above Button -->
  25. <ul class="button-dropdown-menu-above">
  26. <li><a href="http://airwolfe.com">AirWolfe.com</a></li>
  27. <li><a href="http://twitter.com">Twitter</a></li>
  28. <li class="button-dropdown-divider"><a href="http://google.com">Google</a></li>
  29. </ul>
  30. </span>

Block Buttons

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

Button Sizes

  1. <a href="#" class="button button-rounded button-flat-primary button-large">press me</a>
  2. <a href="#" class="button button-rounded button-flat-primary">press me</a>
  3. <a href="#" class="button button-rounded button-flat-primary button-small">press me</a>
  4. <a href="#" class="button button-rounded button-flat-primary button-tiny">press me</a>

Button Wrappers

  1. <span class="button-wrap"><a href="#" class="button button-circle">press me</a></span>
  2. <span class="button-wrap"><a href="#" class="button button-circle button-primary">press me</a></span>
  3. <span class="button-wrap"><a href="#" class="button button-pill ">press me</a></span>
  4. <span class="button-wrap"><a href="#" class="button button-pill button-primary">press me</a></span>

Form Elements Work Too

  1. <input type="submit" value="press me" class="button button-pill button-primary"/>
  2. <button class="button button-pill button-primary">press me</button>
  3.  
  4. <!-- DISABLED BUTTONS -->
  5. <input disabled type="submit" value="press me" class="button button-pill button-primary"/>
  6. <button disabled class="button button-pill button-primary">press me</button>
  7. <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.
    1. <link rel="stylesheet" href="css/font-awesome.min.css">
    2. <link rel="stylesheet" href="css/buttons.css">
    3.  
    4. <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    5. <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