顶部
Fork me on GitHub

CSS3 GitHub Buttons

CSS3 GitHub Buttons helps you easily create GitHub-style buttons from links, buttons, and inputs.

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>

Post comment (link)
<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>

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>

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

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>

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

License

Public domain: https://unlicense.org/

Acknowledgements

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