CSS3 GitHub Buttons helps you easily create GitHub-style buttons from links, buttons, and inputs.
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</a>
<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
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
If you wish to emphasize a specific action you can add the class big.
<a href="#" class="button big">Create Project</a>Create Project
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>
<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>
<div class="button-group minor-group">…</div>
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>
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 |
| 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 |
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.
Public domain: http://unlicense.org/
Inspired by Michael Henriksen's CSS3 Buttons. Icons from Iconic pack.