Skip to content
master
Go to file
Code
This branch is 11 commits ahead, 8 commits behind necolas:master.

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 

README.md

CSS3 GitHub Buttons

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

Example: http://drewjoh.github.com/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 (link)</a>
<input class="button" type="submit" value="Post comment (input)">
<button class="button" type="submit">Post comment (button)</button>

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>

Big buttons

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

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

Small buttons

For smaller buttons you can add the class small. This class will not work with icons (below).

<a href="#" class="button small">Edit Project</a>

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

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 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 &nbsp; (it cannot be left empty).

<a href="#" class="button icon search no-text">&nbsp;</a>

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>

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

Original by Nicolas Gallagher's CSS3 Buttons. Icons from Iconic pack.

About

Helps you easily create GitHub-style buttons from links, buttons, and inputs.

Resources

License

Releases

No releases published

Packages

No packages published
You can’t perform that action at this time.