CSS3 GitHub Buttons helps you easily create GitHub-style buttons from links, buttons, and inputs.
This fork replaces all the icons from the original repo with the icons from Google's Material icons. I was still using Nicolas Gallagher's work in my everyday job, and now that is not maintained anymore, I decided to fork it and replace the limited set of icons that comes with it.
Example from original repo: necolas.github.io/css3-github-buttons/
Grab only gh-buttons.css
and gh-icons.png
and include the stylesheet in your pages:
<link rel="stylesheet" href="gh-buttons.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 (link)</a>
<input class="button" type="submit" value="Post comment (input)">
<button class="button" type="submit">Post comment (button)</button>
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 wish to emphasize a specific action you can add the class big
.
<a href="#" class="button big">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 minor-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>
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>
Icons can be added (only for links and buttons) by adding a class of icon
and any one of the Google's Material icons names prefixed with ic_
.
<a href="#" class="button icon ic_search">Search</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.
If you want to build gh-buttons.css
and gh-icons.png
yourself, you have to fetch Git submodules for Material icons and zopfli and then use the build.js
Node.js script:
git submodule init && git submodule update
cd zopfli && make zopflipng && cd .. # Compile zopflipng
npm install async jimp sprity sprity-jimp # Install build script dependencies
node build.js
Installation of
sprity
will throw errors on Node 7+ because of LWIP compilation. It is safe to ignore them, since the JIMP Sprity engine is used instead of the default LWIP engine.
The script creates the PNG sprite sheet using all icons from the Google's submodule and edits the CSS style sheet accordingly.
Public domain, except Google's Material icons (and so gh-icons.png
) that are licensed under Apache License Version 2.0.
Inspired by Michael Henriksen's CSS3 Buttons.
Forked from Nicolas Gallagher's repo.
Icons from Google's Material icons.