https://github.com/necolas/css3-github-buttons

Helps you easily create GitHub-style buttons and toolbars using links, buttons, and inputs.
https://github.com/necolas/css3-github-buttons

Last synced: about 1 month ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/necolas/css3-github-buttons
• Owner: necolas
• License: unlicense
• Fork: true (michenriksen/css3buttons)
• Created: 2011-03-01T12:56:38.000Z (over 13 years ago)
• Default Branch: master
• Last Pushed: 2020-03-07T16:34:39.000Z (over 4 years ago)
• Last Synced: 2024-09-21T18:36:06.297Z (about 1 month ago)
• Language: HTML
• Homepage: http://necolas.github.io/css3-github-buttons/
• Size: 89.8 KB
• Stars: 1,111
• Watchers: 60
• Forks: 307
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.txt

Awesome Lists containing this project

README

        
# CSS3 GitHub Buttons #

![unmaintained](http://img.shields.io/badge/status-unmaintained-red.png)

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

Example: [necolas.github.io/css3-github-buttons/](http://necolas.github.io/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 (link)

    

    Post comment (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`.

    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

    


## 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](http://unlicense.org)

## Acknowledgements ##

Inspired by [Michael Henriksen](http://michaelhenriksen.dk)'s [CSS3 Buttons](http://github.com/michenriksen/css3buttons). Icons from [Iconic pack](http://somerandomdude.com/projects/iconic/).