CSS3 GitHub Buttons

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</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

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

Buttons with positive actions

As an opposite to the danger class, you can specify the green class for a button.

<a href="#" class="button green">Add a post</a>

Add a post

shop.github.com buttons

<a href="#" class="button solid-green">Add an Item</a>
<a href="#" class="button solid-red">Remove an Item</a>

Add an Item Remove an Item

Big buttons

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

<a href="#" class="button big">Create Project</a>

Create Project

Minibuttons

Add the mini class to create a slightly smaller button.

<a href="#" class="button mini">Create Project</a>

Create Project

Disabled Buttons

Add the disabled class to indicate a disabled button.

<a href="#" class="button disabled">Create Project</a>

Create Project

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

<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

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

Dashboard Inbox Account Logout

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 Labels

Buttons with icons only

A range of icons can be added (only for links and buttons) by adding a class of icon, no-text and any one of the provided icon classes below. You must replace link text with   (it cannot be left empty).

<a href="#" class="button no-text icon search">&nbsp;</a>
	<a href="#" class="button no-text icon fork">&nbsp;</a>
	<a href="#" class="button no-text icon approve green">&nbsp;</a>
	<a href="#" class="button no-text icon remove red">&nbsp;</a>


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

	   <div class="button-group">
	      <a href="#button" class="button primary">Archive</a>
	      <a href="#button" class="button">Report spam</a>
	      <a href="#button" class="button red icon trash no-text"> </a>
	   </div>

	   <div class="button-group minor-group">
	      <a href="#button" class="button">Move to</a>
	      <a href="#button" class="button icon tag no-text"> </a>
	   </div>
	</div>

Compose new

Archive Report spam

Move to

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

Search Field + Button

Shows a search button attached to an input field.

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.