github-like buttons with CSS.
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><a href="#" class="button primary">Publish post</a>
<a href="#" class="button">Save as draft</a>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>If you have a button that triggers a positive action, like adding data, this can be indicated by adding the class positive.
<a href="#" class="button positive">Add post</a>If you wish to emphasize a specific action you can add the class big.
<a href="#" class="button big">Create Project</a>If you wish to show a button as disabled you can add the class disabled. Keep in mind that this will not disable the link/button/input.
<a href="#" class="button disabled">Create Project</a>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><div class="button-group slim-group">…</div>You can add the class active to highlight a button.
<div class="button-group">
<a href="#" class="button primary">Dashboard</a>
<a href="#" class="button">Inbox</a>
<a href="#" class="button active">Account</a>
<a href="#" class="button">Logout</a>
</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="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>An icon can be added (only for links and buttons) by adding a class of icon and one defining the icon. The size of the icon must be 12x12px, in an image that is 24px wide (normal icon on the left, hover on the right).
<style>
.button.favorite.icon:before {
background: url("data:image/png;base64,…");
}
</style>
<a href="#" class="button icon favorite">Add Favorite</a>
<a href="#" class="button icon icon-only favorite"></a>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/
Forked from Nicolas Gallagher, who was inspired by Michael Henriksen's CSS3 Buttons.