Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Disable behaviour #46

Open
wants to merge 41 commits into
base: master
Choose a base branch
from
Open

Disable behaviour #46

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
41 commits
Select commit Hold shift + click to select a range
019dae3
Replaced javascript:void(false) href values with #nogo
necolas Mar 1, 2011
1f9d834
CSS reformat to make editing easier. Minor simplification of some pro…
necolas Mar 1, 2011
d59ad7d
Added button line-height of normal, to provide independence over the …
necolas Mar 1, 2011
5e8dcf1
Complete reworking of how backgrounds are done. Replaced external ima…
necolas Mar 1, 2011
3768893
Demo page: cleaned up HTML a little, added JS shim, removed reset.css…
necolas Mar 1, 2011
e5fe142
Use pseudo-elements to insert icons instead of presentational HTML
necolas Mar 1, 2011
f1eeb24
Changed how button groups work. Uses a container (e.g. div or ul). In…
necolas Mar 1, 2011
379ea55
Modified and structured demo page HTML to include new group examples,…
necolas Mar 1, 2011
7bce1a6
Small change to how .button and .minor-group interact. Removed a few …
necolas Mar 1, 2011
557f303
New button-container. Changed .minor-group so interaction states are …
necolas Mar 1, 2011
b7de52b
Added support for input and button elements
necolas Mar 1, 2011
33d7663
Reintroduced background-clip and set gradients to background-image
necolas Mar 4, 2011
d79532f
Renamed files and directories. Reorganised example page HTML and CSS.…
necolas Mar 13, 2011
f6efcf9
Changed placeholder hrefs, increased padding on table cells
necolas Mar 13, 2011
7ad758f
Reduced default opacity of icons for minor-group buttons
necolas Mar 13, 2011
87e4a13
Updated README and associated copy in example page
necolas Mar 13, 2011
a4b8d2f
Removed media attributes from link elements
necolas Mar 14, 2011
ab2fe87
Added missing <code> block in first example
necolas Mar 14, 2011
2f82555
Included display:inline hack for old IE on button-group
necolas Mar 14, 2011
c866c5b
Added example link to README
necolas Mar 14, 2011
d918081
Fixed broken link in README
necolas Mar 14, 2011
5ab50f5
Actually fixed README link this time
necolas Mar 14, 2011
139b525
Minor copy changes, reordering of icon examples, added 'favorite' icon
necolas Mar 14, 2011
1e17d23
Rebuilt icon sprite, changed a couple of icons, added 'favorite' icon…
necolas Mar 14, 2011
16606e6
Added Opera 11.1 support for CSS gradients
necolas Mar 14, 2011
676b2b1
Reduced opacity of icons in .minor-group on :hover / :focus
necolas Mar 20, 2011
1f2be48
fix #3: Opera background-clip:padding-box bug
necolas Apr 16, 2011
7dd45fd
Update: reorganise files and simplify filenames
necolas Apr 16, 2011
5a47652
Update README
necolas Apr 16, 2011
364fb6d
Improve fix for Firefox inner-padding/border on input/button
necolas Apr 19, 2011
b62c4ea
Removed 'installation instructions' from example file
necolas Apr 19, 2011
bbd5dc8
Correct active state appearance. Fix #5
necolas May 3, 2011
1a1decc
Add GitHub-style disable class. Fix #4
necolas May 3, 2011
dcb3472
Remove duplicate selector. Fix #8
necolas Aug 18, 2011
4acd3d8
Whitespace cleanup
necolas Apr 14, 2012
eac8a20
Vendor prefix updates
necolas Apr 14, 2012
9516e82
Standardise capitalization of hex value's letters
necolas Apr 14, 2012
d932276
Update CSS comments
necolas Apr 14, 2012
8930989
Add `text-align:center` to default button. Fix #15
necolas Apr 14, 2012
02c8017
Fix link in README
necolas Jan 1, 2014
9b3e382
README: unmaintained
necolas Dec 26, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
142 changes: 45 additions & 97 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,129 +1,77 @@
# CSS3 Buttons #
# CSS3 GitHub Buttons #

## What is this? ##
![unmaintained](http://img.shields.io/badge/status-unmaintained-red.png)

[CSS3 buttons](http://css3buttons.michaelhenriksen.dk) is a simple *framework* for creating good-looking GitHub style button links.
CSS3 GitHub Buttons helps you easily create GitHub-style buttons from links, buttons, and inputs.

## Buttons ##
Example: [necolas.github.io/css3-github-buttons/](http://necolas.github.io/css3-github-buttons/)

To create a button, the only thing you have to do is this:
## Buttons ##

<a href="#" class="button">This is a Button</a>
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.

If you prefer a pill-like button with more rounded corners, you can add a `.pill` class to the button
<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>

<a href="#" class="pill button">This is a Pill Button</a>
## Buttons with dangerous actions ##

Sometimes when you have multiple buttons, it's a good thing to highlight the button with the primary action
in order to give the user a visual clue of what action to take if in doubt. This can be accomplished by adding
a `.primary` class to the 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="primary button">Publish Post</a> or <a href="#" class="button">Save as Draft</a>
<a href="#" class="button danger">Delete post</a>

## Buttons with negative actions ##
## Big buttons ##

If you have a button that triggers a negative action, like deleting data, it's good practice to warn the user
by styling the button differently than the normal buttons. Give a button the class `.negative` and the
hover-state will change to red
If you wish to emphasize a specific action you can add the class `big`.

<a href="#" class="negative button">Divide by Zero</a>
<a href="#" class="button big">Create Project</a>

## Grouped buttons ##

You can create grouped buttons that are linked together, like seen at Gmail and other places,
by using the `.left`, `.middle` and `.right` classes:
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`.

<a href="#" class="left primary button">Archive</a>
<a href="#" class="middle button">Report Spam</a>
<a href="#" class="right negative button">Delete</a>
<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>

You can also add the pill class to grouped buttons if preferred:
## Mixed groups ##

<a href="#" class="left primary pill button">Archive</a>
<a href="#" class="middle pill button">Report Spam</a>
<a href="#" class="right negative pill button">Delete</a>
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`.

## Buttons with icons ##
<div class="actions button-container">
<a href="#" class="button primary">Compose new</a>

CSS3 Buttons supports a wide range of icons that can easily be added to any button by adding a span tag inside the anchor
tag with the class of `.icon` and any one of the provided icon classes:
)
<a href="#" class="button"><span class="magnifier icon"></span>Search</a>

Here is a list of all the supported icon classes:

* `.book`
* `.calendar`
* `.chat`
* `.check`
* `.clock`
* `.cog`
* `.comment`
* `.cross`
* `.downarrow`
* `.fork`
* `.heart`
* `.home`
* `.key`
* `.leftarrow`
* `.lock`
* `.loop`
* `.magnifier`
* `.mail`
* `.move`
* `.pen`
* `.pin`
* `.plus`
* `.reload`
* `.rightarrow`
* `.rss`
* `.tag`
* `.trash`
* `.unlock`
* `.uparrow`
* `.user`
<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>

## Big buttons ##
<div class="button-group minor-group">
<a href="#" class="button">Move to</a>
<a href="#" class="button">Labels</a>
</div>
</div>

If you wish to emphasize a specific action you can add the `.big` class to make a more prominent *call-to-action* button:

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

## Browser compatibility ##
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.

CSS3 Buttons works in all major browsers
<a href="#" class="button icon search">Search</a>

**Note:** Some CSS3 features used in CSS3 Buttons is not supported in Internet Explorer browsers! (IE 8 and under)
## Browser compatibility ##

## Installation ##
Firefox 3.5+, Google Chrome, Safari 4+, IE 8+, Opera 10+.

1. Drop `css3buttons.css` in your stylesheets folder
2. Drop `css3buttons_backgrounds.png` and `css3buttons_icons.png` in your images folder
3. Link to `css3buttons.css` in the head section of your HTML page
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 ##

### The [Unlicense](http://unlicense.org): ###

This is free and unencumbered software released into the public domain.

Anyone is free to copy, modify, publish, use, compile, sell, or distribute this software, either in source code form or as a compiled binary, for any purpose, commercial or non-commercial, and by any means.

In jurisdictions that recognize copyright laws, the author or authors of this software dedicate any and all copyright interest in the software to the public domain. We make this dedication for the benefit of the public at large and to the detriment of our heirs and successors. We intend this dedication to be an overt act of relinquishment in perpetuity of all present and future rights to this software under copyright law.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

For more information, please refer to <http://unlicense.org/>

## Shout-Outs ##

* Thanks to [GitHub](http://github.com) and [David Walsh](http://davidwalsh.name/github-css) for inspiration!
* Icons used in CSS3 Buttons are from the excellent [Iconic pack](http://somerandomdude.com/projects/iconic/) by [some random dude](http://somerandomdude.com/)!

## Contact ##
Public domain: [http://unlicense.org](http://unlicense.org)

### Found a Bug? ###
Please create a [ticket on GitHub](https://github.com/michenriksen/css3buttons/issues) With a description of the problem, browser and operating system information and how to reproduce the problem.
## Acknowledgements ##

### Need Help? ###
You can send me a private message on [GitHub](http://github.com/michenriksen/) and I'll do my best to help you.
Inspired by [Michael Henriksen](http://michaelhenriksen.dk)'s [CSS3 Buttons](http://github.com/michenriksen/css3buttons). Icons from [Iconic pack](http://somerandomdude.com/projects/iconic/).
Loading