Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Newer
Older
100644 140 lines (93 sloc) 5.38 kb
a998290 initial commit
michenriksen authored
1 # CSS3 Buttons #
2
3 ## What is this? ##
4
e54c989 Optimized icon sprite and implemented additional icons
michenriksen authored
5 [CSS3 buttons](http://css3buttons.michaelhenriksen.dk) is a simple *framework* for creating good-looking GitHub style button links.
a998290 initial commit
michenriksen authored
6
7 ## Buttons ##
8
9 To create a button, the only thing you have to do is this:
10
11 <a href="#" class="button">This is a Button</a>
12
3db5c76 Update readme file
michenriksen authored
13 You can also use the button tag:
14
15 <button class="button">This is a Button</button>
16
a998290 initial commit
michenriksen authored
17 If you prefer a pill-like button with more rounded corners, you can add a `.pill` class to the button
18
19 <a href="#" class="pill button">This is a Pill Button</a>
20
21 Sometimes when you have multiple buttons, it's a good thing to highlight the button with the primary action
22 in order to give the user a visual clue of what action to take if in doubt. This can be accomplished by adding
23 a `.primary` class to the button
24
25 <a href="#" class="primary button">Publish Post</a> or <a href="#" class="button">Save as Draft</a>
26
27 ## Buttons with negative actions ##
28
29 If you have a button that triggers a negative action, like deleting data, it's good practice to warn the user
30 by styling the button differently than the normal buttons. Give a button the class `.negative` and the
e54c989 Optimized icon sprite and implemented additional icons
michenriksen authored
31 hover-state will change to red
a998290 initial commit
michenriksen authored
32
33 <a href="#" class="negative button">Divide by Zero</a>
34
a564768 Update readme file
michenriksen authored
35 ## Buttons with positive actions ##
36
37 If you have a button that triggers an action you want to encourage your users to do, you can give a button a `.positive` class and the hover-state will change to green
38
39 <a href="#" class="positive button">Save the World</a>
40
a998290 initial commit
michenriksen authored
41 ## Grouped buttons ##
42
43 You can create grouped buttons that are linked together, like seen at Gmail and other places,
44 by using the `.left`, `.middle` and `.right` classes:
45
46 <a href="#" class="left primary button">Archive</a>
47 <a href="#" class="middle button">Report Spam</a>
48 <a href="#" class="right negative button">Delete</a>
49
50 You can also add the pill class to grouped buttons if preferred:
51
52 <a href="#" class="left primary pill button">Archive</a>
53 <a href="#" class="middle pill button">Report Spam</a>
54 <a href="#" class="right negative pill button">Delete</a>
55
56 ## Buttons with icons ##
57
58 CSS3 Buttons supports a wide range of icons that can easily be added to any button by adding a span tag inside the anchor
59 tag with the class of `.icon` and any one of the provided icon classes:
e54c989 Optimized icon sprite and implemented additional icons
michenriksen authored
60 )
a998290 initial commit
michenriksen authored
61 <a href="#" class="button"><span class="magnifier icon"></span>Search</a>
62
63 Here is a list of all the supported icon classes:
64
e54c989 Optimized icon sprite and implemented additional icons
michenriksen authored
65 * `.book`
a998290 initial commit
michenriksen authored
66 * `.calendar`
67 * `.chat`
68 * `.check`
e54c989 Optimized icon sprite and implemented additional icons
michenriksen authored
69 * `.clock`
a998290 initial commit
michenriksen authored
70 * `.cog`
71 * `.comment`
72 * `.cross`
e54c989 Optimized icon sprite and implemented additional icons
michenriksen authored
73 * `.downarrow`
74 * `.fork`
a998290 initial commit
michenriksen authored
75 * `.heart`
76 * `.home`
77 * `.key`
e54c989 Optimized icon sprite and implemented additional icons
michenriksen authored
78 * `.leftarrow`
79 * `.lock`
a998290 initial commit
michenriksen authored
80 * `.loop`
81 * `.magnifier`
82 * `.mail`
e54c989 Optimized icon sprite and implemented additional icons
michenriksen authored
83 * `.move`
a998290 initial commit
michenriksen authored
84 * `.pen`
e54c989 Optimized icon sprite and implemented additional icons
michenriksen authored
85 * `.pin`
a998290 initial commit
michenriksen authored
86 * `.plus`
87 * `.reload`
e54c989 Optimized icon sprite and implemented additional icons
michenriksen authored
88 * `.rightarrow`
a998290 initial commit
michenriksen authored
89 * `.rss`
90 * `.tag`
91 * `.trash`
e54c989 Optimized icon sprite and implemented additional icons
michenriksen authored
92 * `.unlock`
93 * `.uparrow`
a998290 initial commit
michenriksen authored
94 * `.user`
95
96 ## Big buttons ##
97
98 If you wish to emphasize a specific action you can add the `.big` class to make a more prominent *call-to-action* button:
99
100 <a href="#" class="big button">Create Project</a>
101
102 ## Browser compatibility ##
103
104 CSS3 Buttons works in all major browsers
105
e54c989 Optimized icon sprite and implemented additional icons
michenriksen authored
106 **Note:** Some CSS3 features used in CSS3 Buttons is not supported in Internet Explorer browsers! (IE 8 and under)
a998290 initial commit
michenriksen authored
107
108 ## Installation ##
109
110 1. Drop `css3buttons.css` in your stylesheets folder
111 2. Drop `css3buttons_backgrounds.png` and `css3buttons_icons.png` in your images folder
112 3. Link to `css3buttons.css` in the head section of your HTML page
113
114 ## License ##
115
116 ### The [Unlicense](http://unlicense.org): ###
117
118 This is free and unencumbered software released into the public domain.
119
120 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.
121
122 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.
123
124 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.
125
126 For more information, please refer to <http://unlicense.org/>
127
128 ## Shout-Outs ##
129
130 * Thanks to [GitHub](http://github.com) and [David Walsh](http://davidwalsh.name/github-css) for inspiration!
131 * Icons used in CSS3 Buttons are from the excellent [Iconic pack](http://somerandomdude.com/projects/iconic/) by [some random dude](http://somerandomdude.com/)!
132
133 ## Contact ##
134
135 ### Found a Bug? ###
136 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.
137
138 ### Need Help? ###
e54c989 Optimized icon sprite and implemented additional icons
michenriksen authored
139 You can send me a private message on [GitHub](http://github.com/michenriksen/) and I'll do my best to help you.
Something went wrong with that request. Please try again.