CSS3 GitHub Buttons


The "buttons" can be created by adding class="button" to any appropriate , , or 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.

Post comment
Post comment (link)

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.

Big buttons

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

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.

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.

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:

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

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.


Public domain: http://unlicense.org/


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

来源:nicolasgallagher.com    整理:模板之家    转截请保留出处,谢谢!