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>

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

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.

CSS3 GitHub Buttons

Menu