CSS3 GitHub Buttons

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

This is a pill button

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.

Delete post

Big buttons

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

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.

    Dashboard
    Inbox
    Account
    Logout

    
Dashboard
    
Inbox
    
Account
    
Logout

…

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.

    Compose new
    
    

        Archive
        Report spam
        Delete
    
                        
    

        Move to
        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:

Search

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.