# CSS3 GitHub Buttons

CSS3 GitHub Buttons helps you easily create GitHub-style buttons from links, buttons, and inputs.

## Menu

Added Colors Extended Icons Extended Sizes Fully Loaded

This includes the base package by necolas with a few corrections & additions:
• Fixed "danger" in minor group.
• Fixed padding for no text.
• Added "disabled" class
• Added "colors"

## Buttons

The "buttons" can be created by adding `class="button"` to any appropriate `<a>`, `<button>`, or `<input>` element. Add a further class of `pill` to create a button pill-like button. Add a further class of `primary` to emphasise more important actions.

    <a href="#" class="button">Post comment (link)</a>
    <input class="button" type="submit" value="Post comment (input)">
    <button class="button" type="submit">Post comment (button)</button>

Post comment (link)

    <a href="#" class="button pill">This is a pill button</a>

This is a pill button

    <a href="#" class="button primary">Publish post</a>
    <a href="#" class="button">Save as draft</a>

Publish post Save as draft

## Buttons with dangerous actions

If you have a button that triggers a dangerous action, like deleting data, this can be indicated by adding the class `danger`.

    <a href="#" class="button danger">Delete post</a>

Delete post

## Big buttons

If you wish to emphasize a specific action you can add the class `big`.

    <a href="#" class="button big">Create Project</a>
    <a href="#button" class="button big icon approve">Big w/ icon</a>

Create Project Big w/ icon

## Small buttons

As a companion to big, we now have `small`.

    <a href="#" class="button big">Create Project</a>
    <a href="#button" class="button small icon approve">Small w/ icon</a>

Create Project Small w/ icon

## Grouped buttons

Groups of buttons can be created by wrapping them in an element given a class of `button-group`. A less important group of buttons can be marked out by adding a further class, `minor-group`.

    <div class="button-group">
    <a href="#" class="button primary">Dashboard</a>
    <a href="#" class="button">Inbox</a>
    <a href="#" class="button">Account</a>
    <a href="#" class="button">Logout</a>
    </div>

Dashboard Inbox Account Logout Danger Colored Icon

    <ul class="button-group">
    <li><a href="#" class="button primary pill">Dashboard</a></li>
    <li><a href="#" class="button pill">Inbox</a></li>
    <li><a href="#" class="button pill">Account</a></li>
    <li><a href="#" class="button pill">Logout</a></li>
    </ul>

- Dashboard
- Inbox
- Account
- Logout
- Danger
- Colored
- Icon

    <div class="button-group minor-group">…</div>

Dashboard Inbox Account Logout Danger Colored Icon

## Mixed groups

Displaying a mixture of grouped and standalone buttons, as might be seen in a toolbar, can be done by adding another wrapping element with the class `button-container`.

    <div class="actions button-container">
    <a href="#" class="button primary">Compose new</a>

    <div class="button-group">
    <a href="#" class="button primary">Archive</a>
    <a href="#" class="button">Report spam</a>
    <a href="#" class="button danger">Delete</a>
    </div>

    <div class="button-group minor-group">
    <a href="#" class="button">Move to</a>
    <a href="#" class="button">Labels</a>
    </div>
    </div>

Compose new
Archive Report spam Delete
Move to Danger Labels

## Buttons with icons

A range of icons can be added (only for links and buttons) by adding a class of `icon` and any one of the provided icon classes:

    <a href="#" class="button icon search">Search</a>

Search

Class | Example
--- | ---
`.arrowup` | Move up
`.arrowdown` | Move down
`.arrowleft` | Move left
`.arrowright` | Move right
`.approve` | Approve registration
`.add` | Add post
`.remove` | Remove item
`.log` | View log
`.calendar` | Add to calendar
`.chat` | Start chat
`.clock` | Start timer
`.settings` | Settings
`.comment` | Add comment
`.fork` | Fork
`.like` | Like
`.favorite` | Favorite
`.home` | Back to homepage
`.key` | Password protect
`.lock` | Lock
`.unlock` | Unlock
`.loop` | Resend message
`.search` | Search
`.mail` | Send email
`.move` | Move
`.edit` | Edit post
`.pin` | Pin to Map
`.reload` | Reload page
`.rss` | Subscribe to RSS feed
`.tag` | Add tag
`.trash` | Delete post
`.user` | Add new user
`.user` |

# Colors

Class | Example | Active
--- | --- | ---
`[none]` | Default | Default
`.gh-red .danger` | Red | Red
`.gh-green` | Green | Green
`.gh-orange` | Orange | Orange
`.gh-purple` | Purple | Purple
`.gh-brown` | Brown | Brown
`.gh-black` | Black | Black
`.gh-white` | White | White
`.gh-pink` | Pink | Pink
`.gh-lime` | Lime | Lime
`.gh-yellow` | Yellow | Yellow
`.gh-lblue` | Light Blue | Light Blue
`.gh-dblue` | Dark Blue | Dark Blue

## Disabled buttons

A visual way to show a diabled state

    <a href="#button" class="button big disabled">Link Disabled</a>
    <input type="submit" class="button big disabled" value="Input Disabled" />
    <button class="button big disabled gh-green">Button Disabled</button>

Link Disabled

## Browser compatibility

Firefox 3.5+, Google Chrome, Safari 4+, IE 8+, Opera 10+.

Note: Some CSS3 features are not supported in older versions of Opera and versions of Internet Explorer prior to IE 8. The use of icons is not supported in IE 6 or IE 7.

## License

Public domain: http://unlicense.org/

## Acknowledgements

Inspired by Michael Henriksen's CSS3 Buttons. Icons from Iconic pack.

Forked from necolas - CSS3 GitHub Buttons.