├── LICENSE.txt
├── README.md
├── gh-buttons.css
├── gh-icons.png
└── index.html


/LICENSE.txt:
--------------------------------------------------------------------------------
 1 | This is free and unencumbered software released into the public domain.
 2 | 
 3 | Anyone is free to copy, modify, publish, use, compile, sell, or
 4 | distribute this software, either in source code form or as a compiled
 5 | binary, for any purpose, commercial or non-commercial, and by any
 6 | means.
 7 | 
 8 | In jurisdictions that recognize copyright laws, the author or authors
 9 | of this software dedicate any and all copyright interest in the
10 | software to the public domain. We make this dedication for the benefit
11 | of the public at large and to the detriment of our heirs and
12 | successors. We intend this dedication to be an overt act of
13 | relinquishment in perpetuity of all present and future rights to this
14 | software under copyright law.
15 | 
16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
17 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
18 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
19 | IN NO EVENT SHALL THE AUTHORS BE LIABLE FOR ANY CLAIM, DAMAGES OR
20 | OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE,
21 | ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
22 | OTHER DEALINGS IN THE SOFTWARE.
23 | 
24 | For more information, please refer to <http://unlicense.org/>


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # CSS3 GitHub Buttons #
 2 | 
 3 | ![unmaintained](http://img.shields.io/badge/status-unmaintained-red.png)
 4 | 
 5 | CSS3 GitHub Buttons helps you easily create GitHub-style buttons from links, buttons, and inputs.
 6 | 
 7 | Example: [necolas.github.io/css3-github-buttons/](http://necolas.github.io/css3-github-buttons/)
 8 | 
 9 | ## Buttons ##
10 | 
11 | 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.
12 | 
13 |     <a href="#" class="button">Post comment (link)</a>
14 |     <input class="button" type="submit" value="Post comment (input)">
15 |     <button class="button" type="submit">Post comment (button)</button>
16 | 
17 | ## Buttons with dangerous actions ##
18 | 
19 | If you have a button that triggers a dangerous action, like deleting data, this can be indicated by adding the class `danger`.
20 | 
21 |     <a href="#" class="button danger">Delete post</a>
22 | 
23 | ## Big buttons ##
24 | 
25 | If you wish to emphasize a specific action you can add the class `big`.
26 | 
27 |     <a href="#" class="button big">Create Project</a>
28 | 
29 | ## Grouped buttons ##
30 | 
31 | 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`.
32 | 
33 |     <div class="button-group minor-group">
34 |         <a href="#" class="button primary">Dashboard</a>
35 |         <a href="#" class="button">Inbox</a>
36 |         <a href="#" class="button">Account</a>
37 |         <a href="#" class="button">Logout</a>
38 |     </div>
39 | 
40 | ## Mixed groups ##
41 | 
42 | 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`.
43 | 
44 |     <div class="actions button-container">
45 |         <a href="#" class="button primary">Compose new</a>
46 | 
47 |         <div class="button-group">
48 |             <a href="#" class="button primary">Archive</a>
49 |             <a href="#" class="button">Report spam</a>
50 |             <a href="#" class="button danger">Delete</a>
51 |         </div>
52 | 
53 |         <div class="button-group minor-group">
54 |             <a href="#" class="button">Move to</a>
55 |             <a href="#" class="button">Labels</a>
56 |         </div>
57 |     </div>
58 | 
59 | ## Buttons with icons ##
60 | 
61 | 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.
62 | 
63 |     <a href="#" class="button icon search">Search</a>
64 | 
65 | ## Browser compatibility ##
66 | 
67 | Firefox 3.5+, Google Chrome, Safari 4+, IE 8+, Opera 10+.
68 | 
69 | 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.
70 | 
71 | ## License ##
72 | 
73 | Public domain: [http://unlicense.org](http://unlicense.org)
74 | 
75 | ## Acknowledgements ##
76 | 
77 | Inspired by [Michael Henriksen](http://michaelhenriksen.dk)'s [CSS3 Buttons](http://github.com/michenriksen/css3buttons). Icons from [Iconic pack](http://somerandomdude.com/projects/iconic/).
78 | 


--------------------------------------------------------------------------------
/gh-buttons.css:
--------------------------------------------------------------------------------
  1 | /* ------------------------------------------
  2 |  * CSS3 GITHUB BUTTONS (Nicolas Gallagher)
  3 |  * Licensed under Unlicense
  4 |  * http://github.com/necolas/css3-github-buttons
  5 |  * --------------------------------------- */
  6 | 
  7 | 
  8 | /* =============================================================================
  9 |    Base Button
 10 |    ========================================================================== */
 11 | 
 12 | .button {
 13 |     position: relative;
 14 |     overflow: visible;
 15 |     display: inline-block;
 16 |     padding: 0.5em 1em;
 17 |     border: 1px solid #d4d4d4;
 18 |     margin: 0;
 19 |     text-decoration: none;
 20 |     text-align: center;
 21 |     text-shadow: 1px 1px 0 #fff;
 22 |     font:11px/normal sans-serif;
 23 |     color: #333;
 24 |     white-space: nowrap;
 25 |     cursor: pointer;
 26 |     outline: none;
 27 |     background-color: #ececec;
 28 |     background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f4f4f4), to(#ececec));
 29 |     background-image: -moz-linear-gradient(#f4f4f4, #ececec);
 30 |     background-image: -ms-linear-gradient(#f4f4f4, #ececec);
 31 |     background-image: -o-linear-gradient(#f4f4f4, #ececec);
 32 |     background-image: linear-gradient(#f4f4f4, #ececec);
 33 |     -moz-background-clip: padding; /* for Firefox 3.6 */
 34 |     background-clip: padding-box;
 35 |     border-radius: 0.2em;
 36 |     /* IE hacks */
 37 |     zoom: 1;
 38 |     *display: inline;
 39 | }
 40 | 
 41 | .button:hover,
 42 | .button:focus,
 43 | .button:active,
 44 | .button.active {
 45 |     border-color: #3072b3;
 46 |     border-bottom-color: #2a65a0;
 47 |     text-decoration: none;
 48 |     text-shadow: -1px -1px 0 rgba(0,0,0,0.3);
 49 |     color: #fff;
 50 |     background-color: #3c8dde;
 51 |     background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#599bdc), to(#3072b3));
 52 |     background-image: -moz-linear-gradient(#599bdc, #3072b3);
 53 |     background-image: -o-linear-gradient(#599bdc, #3072b3);
 54 |     background-image: linear-gradient(#599bdc, #3072b3);
 55 | }
 56 | 
 57 | .button:active,
 58 | .button.active {
 59 |     border-color: #2a65a0;
 60 |     border-bottom-color: #3884cd;
 61 |     background-color: #3072b3;
 62 |     background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#3072b3), to(#599bdc));
 63 |     background-image: -moz-linear-gradient(#3072b3, #599bdc);
 64 |     background-image: -ms-linear-gradient(#3072b3, #599bdc);
 65 |     background-image: -o-linear-gradient(#3072b3, #599bdc);
 66 |     background-image: linear-gradient(#3072b3, #599bdc);
 67 | }
 68 | 
 69 | /* overrides extra padding on button elements in Firefox */
 70 | .button::-moz-focus-inner {
 71 |     padding: 0;
 72 |     border: 0;
 73 | }
 74 | 
 75 | 
 76 | /* =============================================================================
 77 |    Button icons
 78 |    ========================================================================== */
 79 | 
 80 | .button.icon:before {
 81 |     content: "";
 82 |     position: relative;
 83 |     top: 1px;
 84 |     float:left;
 85 |     width: 12px;
 86 |     height: 12px;
 87 |     margin: 0 0.75em 0 -0.25em;
 88 |     background: url(gh-icons.png) 0 99px no-repeat;
 89 | }
 90 | 
 91 | .button.arrowup.icon:before { background-position: 0 0; }
 92 | .button.arrowup.icon:hover:before,
 93 | .button.arrowup.icon:focus:before,
 94 | .button.arrowup.icon:active:before { background-position: -12px 0; }
 95 | 
 96 | .button.arrowdown.icon:before { background-position: 0 -12px; }
 97 | .button.arrowdown.icon:hover:before,
 98 | .button.arrowdown.icon:focus:before,
 99 | .button.arrowdown.icon:active:before { background-position: -12px -12px; }
100 | 
101 | .button.arrowleft.icon:before { background-position: 0 -24px; }
102 | .button.arrowleft.icon:hover:before,
103 | .button.arrowleft.icon:focus:before,
104 | .button.arrowleft.icon:active:before { background-position: -12px -24px; }
105 | 
106 | .button.arrowright.icon:before { float:right; margin: 0 -0.25em 0 0.5em; background-position: 0 -36px; }
107 | .button.arrowright.icon:hover:before,
108 | .button.arrowright.icon:focus:before,
109 | .button.arrowright.icon:active:before { background-position: -12px -36px; }
110 | 
111 | .button.approve.icon:before { background-position: 0 -48px; }
112 | .button.approve.icon:hover:before,
113 | .button.approve.icon:focus:before,
114 | .button.approve.icon:active:before { background-position: -12px -48px; }
115 | 
116 | .button.add.icon:before { background-position: 0 -288px; }
117 | .button.add.icon:hover:before,
118 | .button.add.icon:focus:before,
119 | .button.add.icon:active:before { background-position: -12px -288px; }
120 | 
121 | .button.remove.icon:before { background-position: 0 -60px; }
122 | .button.remove.icon:hover:before,
123 | .button.remove.icon:focus:before,
124 | .button.remove.icon:active:before { background-position: -12px -60px; }
125 | 
126 | .button.log.icon:before { background-position: 0 -72px; }
127 | .button.log.icon:hover:before,
128 | .button.log.icon:focus:before,
129 | .button.log.icon:active:before { background-position: -12px -72px; }
130 | 
131 | .button.calendar.icon:before { background-position: 0 -84px; }
132 | .button.calendar.icon:hover:before,
133 | .button.calendar.icon:focus:before,
134 | .button.calendar.icon:active:before { background-position: -12px -84px; }
135 | 
136 | .button.chat.icon:before { background-position: 0 -96px; }
137 | .button.chat.icon:hover:before,
138 | .button.chat.icon:focus:before,
139 | .button.chat.icon:active:before { background-position: -12px -96px; }
140 | 
141 | .button.clock.icon:before { background-position: 0 -108px; }
142 | .button.clock.icon:hover:before,
143 | .button.clock.icon:focus:before,
144 | .button.clock.icon:active:before { background-position: -12px -108px; }
145 | 
146 | .button.settings.icon:before { background-position: 0 -120px; }
147 | .button.settings.icon:hover:before,
148 | .button.settings.icon:focus:before,
149 | .button.settings.icon:active:before { background-position: -12px -120px; }
150 | 
151 | .button.comment.icon:before { background-position: 0 -132px; }
152 | .button.comment.icon:hover:before,
153 | .button.comment.icon:focus:before,
154 | .button.comment.icon:active:before { background-position: -12px -132px; }
155 | 
156 | .button.fork.icon:before { background-position: 0 -144px; }
157 | .button.fork.icon:hover:before,
158 | .button.fork.icon:focus:before,
159 | .button.fork.icon:active:before { background-position: -12px -144px; }
160 | 
161 | .button.like.icon:before { background-position: 0 -156px; }
162 | .button.like.icon:hover:before,
163 | .button.like.icon:focus:before,
164 | .button.like.icon:active:before { background-position: -12px -156px; }
165 | 
166 | .button.favorite.icon:before { background-position: 0 -348px; }
167 | .button.favorite.icon:hover:before,
168 | .button.favorite.icon:focus:before,
169 | .button.favorite.icon:active:before { background-position: -12px -348px; }
170 | 
171 | .button.home.icon:before { background-position: 0 -168px; }
172 | .button.home.icon:hover:before,
173 | .button.home.icon:focus:before,
174 | .button.home.icon:active:before { background-position: -12px -168px; }
175 | 
176 | .button.key.icon:before { background-position: 0 -180px; }
177 | .button.key.icon:hover:before,
178 | .button.key.icon:focus:before,
179 | .button.key.icon:active:before { background-position: -12px -180px; }
180 | 
181 | .button.lock.icon:before { background-position: 0 -192px; }
182 | .button.lock.icon:hover:before,
183 | .button.lock.icon:focus:before,
184 | .button.lock.icon:active:before { background-position: -12px -192px; }
185 | 
186 | .button.unlock.icon:before { background-position: 0 -204px; }
187 | .button.unlock.icon:hover:before,
188 | .button.unlock.icon:focus:before,
189 | .button.unlock.icon:active:before { background-position: -12px -204px; }
190 | 
191 | .button.loop.icon:before { background-position: 0 -216px; }
192 | .button.loop.icon:hover:before,
193 | .button.loop.icon:focus:before,
194 | .button.loop.icon:active:before { background-position: -12px -216px; }
195 | 
196 | .button.search.icon:before { background-position: 0 -228px; }
197 | .button.search.icon:hover:before,
198 | .button.search.icon:focus:before,
199 | .button.search.icon:active:before { background-position: -12px -228px; }
200 | 
201 | .button.mail.icon:before { background-position: 0 -240px; }
202 | .button.mail.icon:hover:before,
203 | .button.mail.icon:focus:before,
204 | .button.mail.icon:active:before { background-position: -12px -240px; }
205 | 
206 | .button.move.icon:before { background-position: 0 -252px; }
207 | .button.move.icon:hover:before,
208 | .button.move.icon:focus:before,
209 | .button.move.icon:active:before { background-position: -12px -252px; }
210 | 
211 | .button.edit.icon:before { background-position: 0 -264px; }
212 | .button.edit.icon:hover:before,
213 | .button.edit.icon:focus:before,
214 | .button.edit.icon:active:before { background-position: -12px -264px; }
215 | 
216 | .button.pin.icon:before { background-position: 0 -276px; }
217 | .button.pin.icon:hover:before,
218 | .button.pin.icon:focus:before,
219 | .button.pin.icon:active:before { background-position: -12px -276px; }
220 | 
221 | .button.reload.icon:before { background-position: 0 -300px; }
222 | .button.reload.icon:hover:before,
223 | .button.reload.icon:focus:before,
224 | .button.reload.icon:active:before { background-position: -12px -300px; }
225 | 
226 | .button.rss.icon:before { background-position: 0 -312px; }
227 | .button.rss.icon:hover:before,
228 | .button.rss.icon:focus:before,
229 | .button.rss.icon:active:before { background-position: -12px -312px; }
230 | 
231 | .button.tag.icon:before { background-position: 0 -324px; }
232 | .button.tag.icon:hover:before,
233 | .button.tag.icon:focus:before,
234 | .button.tag.icon:active:before { background-position: -12px -324px; }
235 | 
236 | .button.trash.icon:before { background-position: 0 -336px; }
237 | .button.trash.icon:hover:before,
238 | .button.trash.icon:focus:before,
239 | .button.trash.icon:active:before { background-position: -12px -336px; }
240 | 
241 | .button.user.icon:before { background-position: 0 -360px; }
242 | .button.user.icon:hover:before,
243 | .button.user.icon:focus:before,
244 | .button.user.icon:active:before { background-position: -12px -360px; }
245 | 
246 | 
247 | /* =============================================================================
248 |    Button extensions
249 |    ========================================================================== */
250 | 
251 | /* Primary button
252 |    ========================================================================== */
253 | 
254 | .button.primary {
255 |     font-weight: bold;
256 | }
257 | 
258 | /* Danger button
259 |    ========================================================================== */
260 | 
261 | .button.danger {
262 |     color: #900;
263 | }
264 | 
265 | .button.danger:hover,
266 | .button.danger:focus,
267 | .button.danger:active {
268 |     border-color: #b53f3a;
269 |     border-bottom-color: #a0302a;
270 |     color: #fff;
271 |     background-color: #dc5f59;
272 |     background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#dc5f59), to(#b33630));
273 |     background-image: -moz-linear-gradient(#dc5f59, #b33630);
274 |     background-image: -ms-linear-gradient(#dc5f59, #b33630);
275 |     background-image: -o-linear-gradient(#dc5f59, #b33630);
276 |     background-image: linear-gradient(#dc5f59, #b33630);
277 | }
278 | 
279 | .button.danger:active,
280 | .button.danger.active {
281 |     border-color: #a0302a;
282 |     border-bottom-color: #bf4843;
283 |     background-color: #b33630;
284 |     background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#b33630), to(#dc5f59));
285 |     background-image: -moz-linear-gradient(#b33630, #dc5f59);
286 |     background-image: -ms-linear-gradient(#b33630, #dc5f59);
287 |     background-image: -o-linear-gradient(#b33630, #dc5f59);
288 |     background-image: linear-gradient(#b33630, #dc5f59);
289 | }
290 | 
291 | /* Pill button
292 |    ========================================================================== */
293 | 
294 | .button.pill {
295 |     border-radius: 50em;
296 | }
297 | 
298 | /* Disabled button
299 |    ========================================================================== */
300 | 
301 | .button.disable {
302 |     opacity: 0.5;
303 | }
304 | 
305 | /* Big button
306 |    ========================================================================== */
307 | 
308 | .button.big {
309 |     font-size: 14px;
310 | }
311 | 
312 | .button.big.icon:before {
313 |     top: 0;
314 | }
315 | 
316 | 
317 | /* =============================================================================
318 |    Button groups
319 |    ========================================================================== */
320 | 
321 | /* Standard group
322 |    ========================================================================== */
323 | 
324 | .button-group {
325 |     display: inline-block;
326 |     list-style: none;
327 |     padding: 0;
328 |     margin: 0;
329 |     /* IE hacks */
330 |     zoom: 1;
331 |     *display: inline;
332 | }
333 | 
334 | .button + .button,
335 | .button + .button-group,
336 | .button-group + .button,
337 | .button-group + .button-group {
338 |     margin-left: 15px;
339 | }
340 | 
341 | .button-group li {
342 |     float: left;
343 |     padding: 0;
344 |     margin: 0;
345 | }
346 | 
347 | .button-group .button {
348 |     float: left;
349 |     margin-left: -1px;
350 | }
351 | 
352 | .button-group > .button:not(:first-child):not(:last-child),
353 | .button-group li:not(:first-child):not(:last-child) .button {
354 |     border-radius: 0;
355 | }
356 | 
357 | .button-group > .button:first-child,
358 | .button-group li:first-child .button {
359 |     margin-left: 0;
360 |     border-top-right-radius: 0;
361 |     border-bottom-right-radius: 0;
362 | }
363 | 
364 | .button-group > .button:last-child,
365 | .button-group li:last-child > .button {
366 |     border-top-left-radius: 0;
367 |     border-bottom-left-radius: 0;
368 | }
369 | 
370 | /* Minor group
371 |    ========================================================================== */
372 | 
373 | .button-group.minor-group .button {
374 |     border: 1px solid #d4d4d4;
375 |     text-shadow: none;
376 |     background-image: none;
377 |     background-color: #fff;
378 | }
379 | 
380 | .button-group.minor-group .button:hover,
381 | .button-group.minor-group .button:focus {
382 |     background-color: #599bdc;
383 | }
384 | 
385 | .button-group.minor-group .button:active,
386 | .button-group.minor-group .button.active {
387 |     background-color: #3072b3;
388 | }
389 | 
390 | .button-group.minor-group .button.icon:before {
391 |     opacity: 0.8;
392 | }
393 | 
394 | /* =============================================================================
395 |    Button container (mixing buttons and groups, e.g., nav bar)
396 |    ========================================================================== */
397 | 
398 | .button-container .button,
399 | .button-container .button-group {
400 |     vertical-align: top;
401 | }
402 | 
403 | 


--------------------------------------------------------------------------------
/gh-icons.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/necolas/css3-github-buttons/9b3e3828e793f98d727b0bed4c88afc1b4ffd088/gh-icons.png


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html> 
  2 | <html lang="en"> 
  3 | <head> 
  4 |     <meta charset="utf-8"> 
  5 |     <title>CSS3 GitHub Buttons</title> 
  6 |     <meta name="description" content="Using CSS3 to create GitHub-style buttons from links, buttons, and inputs"> 
  7 |     <style>
  8 |         /* ------------------------------------------------------------------------------------------------------------- RESET */
  9 | 
 10 |         html, body, div, form, p,
 11 |         code, pre { margin: 0; padding: 0; border: 0; vertical-align: baseline; }
 12 | 
 13 |         /* ------------------------------------------------------------------------------------------------------------- TEMPLATE */
 14 | 
 15 |         body { font: 14px/1.333 sans-serif; color: #444; background: #eee; }
 16 | 
 17 |         a { color: #980905; }
 18 |         a:hover, a:focus, a:active { text-decoration: none; }
 19 | 
 20 |         h1 { margin: 0 0 0.5em; font-size: 36px; }
 21 |         h2 { margin: 0 0 0.75em; font-size: 21px; }
 22 |         h3 { margin: 0 0 0.333em; font-size: 16px; font-weight: normal; }
 23 |         p { margin: 0 0 1.333em; }
 24 |         em { font-style: italic; }
 25 |         table { border-collapse: separate; border-spacing: 0; margin: 0; vertical-align: middle; }
 26 |         th { font-weight: bold; }
 27 |         th, td { padding: 5px 25px 5px 5px; text-align: left; vertical-align: middle; }
 28 |         pre, code { font-family: monospace, sans-serif; font-size: 1em; color:#080; }
 29 | 
 30 |         /* ------------------------------------------------------------------------------------------------------------- TEMPLATE */
 31 | 
 32 |         .container { position:relative; overflow:hidden; width: 600px; padding: 40px 60px; border: 1px solid #ccc; margin: 40px auto 20px; background: #fff; -webkit-box-shadow: 0 0 15px rgba(0,0,0,0.1); -moz-box-shadow: 0 0 15px rgba(0,0,0,0.1); box-shadow: 0 0 15px rgba(0,0,0,0.1); }
 33 | 
 34 |         .container pre,
 35 |         .container .prettyprint { padding: 0; border: 0; margin: 0 0 20px; font-size: 13px; background: #fff; }
 36 | 
 37 |         .ribbon { position: absolute; top: -1px; right: -1px; opacity: 0.9; }
 38 |         .ribbon:hover, .ribbon:focus, .ribbon:active { opacity: 1; }
 39 |         .ribbon img { display: block; border: 0; }
 40 | 
 41 |         .header { padding-right:80px; }
 42 | 
 43 |         .section { margin: 40px 0 20px; }
 44 | 
 45 |         .example { padding: 20px; border: 1px solid #ccc; margin: 10px -20px 20px; }
 46 | 
 47 |         .footer { margin: 20px 0 50px; font-size: 11px; color: #666; text-align: center; }
 48 |         .footer a { color: #666; }
 49 |     </style>
 50 |     
 51 |     <link rel="stylesheet" href="gh-buttons.css">
 52 |     
 53 |     <!-- prettyify -->
 54 |     <link rel="stylesheet" href="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css"> 
 55 |     <script src="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js"></script> 
 56 | </head> 
 57 | <body onload="prettyPrint()">
 58 | 
 59 | <div class="container">
 60 |     <a class="ribbon" href="http://github.com/necolas/css3-github-buttons" target="_blank"><img src="http://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" alt="Fork me on GitHub"></a>
 61 |     
 62 |     <div class="header">
 63 |         <h1>CSS3 GitHub Buttons</h1>
 64 |         <p><b><a href="http://github.com/necolas/css3-github-buttons" title="GitHub repository">CSS3 GitHub Buttons</a> helps you easily create GitHub-style buttons from links, buttons, and inputs.</b></p>
 65 |     </div>
 66 |     
 67 |     <div class="section">
 68 |         <h2>Buttons</h2>
 69 |         <p>The "buttons" can be created by adding <code>class="button"</code> to any appropriate <code>&lt;a></code>, <code>&lt;button></code>, or <code>&lt;input></code> element. Add a further class of <code>pill</code> to create a button pill-like button. Add a further class of <code>primary</code> to emphasise more important actions.</p>
 70 | 
 71 |         <div class="example">
 72 |             <pre class="code prettyprint"><code>&lt;a href="#" class="button">Post comment&lt;/a></code></pre>
 73 |             <form>
 74 |                 <a href="#button" class="button">Post comment (link)</a>
 75 |                 <input class="button" type="submit" value="Post comment (input)">
 76 |                 <button class="button" type="submit">Post comment (button)</button>
 77 |             </form>
 78 |         </div>
 79 |         
 80 |         <div class="example">
 81 |             <pre class="prettyprint"><code>&lt;a href="#" class="button pill">This is a pill button&lt;/a></code></pre>
 82 |             <a href="#button" class="button pill">This is a pill button</a>
 83 |         </div>
 84 | 
 85 |         <div class="example">
 86 |             <pre class="prettyprint"><code>&lt;a href="#" class="button primary">Publish post&lt;/a> 
 87 | &lt;a href="#" class="button">Save as draft&lt;/a></code></pre>
 88 |             <a href="#button" class="button primary">Publish post</a> <a href="#button" class="button">Save as draft</a>
 89 |         </div>
 90 |     </div>
 91 | 
 92 |     <div class="section">
 93 |         <h2>Buttons with dangerous actions</h2>
 94 |         <p>If you have a button that triggers a <em>dangerous</em> action, like deleting data, this can be indicated by adding the class <code>danger</code>.</p>
 95 |         <div class="example">
 96 |             <pre class="prettyprint"><code>&lt;a href="#" class="button danger">Delete post&lt;/a></code></pre>
 97 |             <a href="#button" class="button danger">Delete post</a>
 98 |         </div>
 99 |     </div>
100 |     
101 |     <div class="section">
102 |         <h2>Big buttons</h2>
103 |         <p>If you wish to emphasize a specific action you can add the class <code>big</code>.</p>
104 |         
105 |         <div class="example">
106 |             <pre class="prettyprint"><code>&lt;a href="#" class="button big">Create Project&lt;/a></code></pre>
107 |             <a href="#button" class="button big">Create Project</a>
108 |         </div>
109 |     </div>
110 | 
111 |     <div class="section">
112 |         <h2>Grouped buttons</h2>
113 |         <p>Groups of buttons can be created by wrapping them in an element given a class of <code>button-group</code>. A less important group of buttons can be marked out by adding a further class, <code>minor-group</code>.</p>
114 |         
115 |         <div class="example">
116 | <pre class="prettyprint"><code>&lt;div class="button-group">
117 |     &lt;a href="#" class="button primary">Dashboard&lt;/a>
118 |     &lt;a href="#" class="button">Inbox&lt;/a>
119 |     &lt;a href="#" class="button">Account&lt;/a>
120 |     &lt;a href="#" class="button">Logout&lt;/a>
121 | &lt;/div></code></pre>
122 |             <div class="button-group">
123 |                 <a href="#button" class="button primary">Dashboard</a>
124 |                 <a href="#button" class="button">Inbox</a>
125 |                 <a href="#button" class="button">Account</a>
126 |                 <a href="#button" class="button">Logout</a>
127 |             </div>
128 |         </div>
129 |         
130 |         <div class="example">
131 | <pre class="prettyprint"><code>&lt;ul class="button-group">
132 |     &lt;li>&lt;a href="#" class="button primary pill">Dashboard&lt;/a>&lt;/li>
133 |     &lt;li>&lt;a href="#" class="button pill">Inbox&lt;/a>&lt;/li>
134 |     &lt;li>&lt;a href="#" class="button pill">Account&lt;/a>&lt;/li>
135 |     &lt;li>&lt;a href="#" class="button pill">Logout&lt;/a>&lt;/li>
136 | &lt;/ul></code></pre>    
137 |             <ul class="button-group">
138 |                 <li><a href="#button" class="button primary pill">Dashboard</a></li>
139 |                 <li><a href="#button" class="button pill">Inbox</a></li>
140 |                 <li><a href="#button" class="button pill">Account</a></li>
141 |                 <li><a href="#button" class="button pill">Logout</a></li>
142 |             </ul>
143 |         </div>
144 |         
145 |         <div class="example">
146 | <pre class="prettyprint"><code>&lt;div class="button-group <b>minor-group</b>">&hellip;&lt;/div></code></pre>
147 |             <div class="button-group minor-group">
148 |                 <a href="#button" class="button primary">Dashboard</a>
149 |                 <a href="#button" class="button">Inbox</a>
150 |                 <a href="#button" class="button">Account</a>
151 |                 <a href="#button" class="button">Logout</a>
152 |             </div>
153 |         </div>
154 |     </div>
155 | 
156 |     <div class="section">
157 |         <h2>Mixed groups</h2>
158 |         <p>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 <code>button-container</code>.</p>
159 |         
160 |         <div class="example">
161 | <pre class="prettyprint"><code>&lt;div class="actions <b>button-container</b>">
162 |     &lt;a href="#" class="button primary">Compose new&lt;/a>
163 |     
164 |     &lt;div class="button-group">
165 |         &lt;a href="#" class="button primary">Archive&lt;/a>
166 |         &lt;a href="#" class="button">Report spam&lt;/a>
167 |         &lt;a href="#" class="button danger">Delete&lt;/a>
168 |     &lt;/div>
169 |                         
170 |     &lt;div class="button-group minor-group">
171 |         &lt;a href="#" class="button">Move to&lt;/a>
172 |         &lt;a href="#" class="button">Labels&lt;/a>
173 |     &lt;/div>
174 | &lt;/div></code></pre>
175 |             <div class="actions button-container">
176 |                 <a href="#button" class="button primary">Compose new</a>
177 |                 
178 |                 <div class="button-group">
179 |                     <a href="#button" class="button primary">Archive</a>
180 |                     <a href="#button" class="button">Report spam</a>
181 |                     <a href="#button" class="button danger">Delete</a>
182 |                 </div>
183 |                                     
184 |                 <div class="button-group minor-group">
185 |                     <a href="#button" class="button">Move to</a>
186 |                     <a href="#button" class="button">Labels</a>
187 |                 </div>
188 |             </div>
189 |         </div>
190 |     </div>
191 | 
192 |     <div class="section">
193 |         <h2>Buttons with icons</h2>
194 |         <p>A range of icons can be added (only for links and buttons) by adding a class of <code>icon</code> and any one of the provided icon classes:</p>
195 |             
196 |         <div class="example">
197 |             <pre class="prettyprint"><code>&lt;a href="#" class="button icon search">Search&lt;/a></code></pre>
198 |             <a href="#button" class="button icon search">Search</a>
199 |         </div>
200 |         
201 |         <div class="example">
202 |             <table>
203 |                 <thead>
204 |                     <tr>
205 |                         <th scope="col">Class</th>
206 |                         <th scope="col">Example</th>
207 |                     </tr>
208 |                 </thead>
209 |                 <tr>
210 |                     <td scope="row"><code>.arrowup</code></td>
211 |                     <td><a href="#button" class="button icon arrowup">Move up</a></td>
212 |                 </tr>
213 |                 <tr>
214 |                     <td scope="row"><code>.arrowdown</code></td>
215 |                     <td><a href="#button" class="button icon arrowdown">Move down</a></td>
216 |                 </tr>
217 |                 <tr>
218 |                     <td scope="row"><code>.arrowleft</code></td>
219 |                     <td><a href="#button" class="button icon arrowleft">Move left</a></td>
220 |                 </tr>
221 |                 <tr>
222 |                     <td scope="row"><code>.arrowright</code></td>
223 |                     <td><a href="#button" class="button icon arrowright">Move right</a></td>
224 |                 </tr>
225 |                 <tr>
226 |                     <td scope="row"><code>.approve</code></td>
227 |                     <td><a href="#button" class="button icon approve">Approve registration</a></td>
228 |                 </tr>
229 |                 <tr>
230 |                     <td scope="row"><code>.add</code></td>
231 |                     <td><a href="#button" class="button icon add">Add post</a></td>
232 |                 </tr>
233 |                 <tr>
234 |                     <td scope="row"><code>.remove</code></td>
235 |                     <td><a href="#button" class="button danger icon remove">Remove item</a></td>
236 |                 </tr>
237 |                 <tr>
238 |                     <td scope="row"><code>.log</code></td>
239 |                     <td><a href="#button" class="button icon log">View log</a></td>
240 |                 </tr>
241 |                 <tr>
242 |                     <td scope="row"><code>.calendar</code></td>
243 |                     <td><a href="#button" class="button icon calendar">Add to calendar</a></td>
244 |                 </tr>
245 |                 <tr>
246 |                     <td scope="row"><code>.chat</code></td>
247 |                     <td><a href="#button" class="button icon chat">Start chat</a></td>
248 |                 </tr>
249 |                 <tr>
250 |                     <td scope="row"><code>.clock</code></td>
251 |                     <td><a href="#button" class="button icon clock">Start timer</a></td>
252 |                 </tr>
253 |                 <tr>
254 |                     <td scope="row"><code>.settings</code></td>
255 |                     <td><a href="#button" class="button icon settings">Settings</a></td>
256 |                 </tr>
257 |                 <tr>
258 |                     <td scope="row"><code>.comment</code></td>
259 |                     <td><a href="#button" class="button icon comment">Add comment</a></td>
260 |                 </tr>
261 |                 <tr>
262 |                     <td scope="row"><code>.fork</code></td>
263 |                     <td><a href="#button" class="button icon fork">Fork</a></td>
264 |                 </tr>
265 |                 <tr>
266 |                     <td scope="row"><code>.like</code></td>
267 |                     <td><a href="#button" class="button icon like">Like</a></td>
268 |                 </tr>
269 |                 <tr>
270 |                     <td scope="row"><code>.favorite</code></td>
271 |                     <td><a href="#button" class="button icon favorite">Favorite</a></td>
272 |                 </tr>
273 |                 <tr>
274 |                     <td scope="row"><code>.home</code></td>
275 |                     <td><a href="#button" class="button icon home">Back to homepage</a></td>
276 |                 </tr>
277 |                 <tr>
278 |                     <td scope="row"><code>.key</code></td>
279 |                     <td><a href="#button" class="button icon key">Password protect</a></td>
280 |                 </tr>
281 |                 <tr>
282 |                     <td scope="row"><code>.lock</code></td>
283 |                     <td><a href="#button" class="button icon lock">Lock</a></td>
284 |                 </tr>
285 |                 <tr>
286 |                     <td scope="row"><code>.unlock</code></td>
287 |                     <td><a href="#button" class="button icon unlock">Unlock</a></td>
288 |                 </tr>
289 |                 <tr>
290 |                     <td scope="row"><code>.loop</code></td>
291 |                     <td><a href="#button" class="button icon loop">Resend message</a></td>
292 |                 </tr>
293 |                 <tr>
294 |                     <td scope="row"><code>.search</code></td>
295 |                     <td><a href="#button" class="button icon search">Search</a></td>
296 |                 </tr>
297 |                 <tr>
298 |                     <td scope="row"><code>.mail</code></td>
299 |                     <td><a href="#button" class="button icon mail">Send email</a></td>
300 |                 </tr>
301 |                 <tr>
302 |                     <td scope="row"><code>.move</code></td>
303 |                     <td><a href="#button" class="button icon move">Move</a></td>
304 |                 </tr>
305 |                 <tr>
306 |                     <td scope="row"><code>.edit</code></td>
307 |                     <td><a href="#button" class="button icon edit">Edit post</a></td>
308 |                 </tr>
309 |                 <tr>
310 |                     <td scope="row"><code>.pin</code></td>
311 |                     <td><a href="#button" class="button icon pin">Pin to Map</a></td>
312 |                 </tr>
313 |                 <tr>
314 |                     <td scope="row"><code>.reload</code></td>
315 |                     <td><a href="#button" class="button icon reload">Reload page</a></td>
316 |                 </tr>
317 |                 <tr>
318 |                     <td scope="row"><code>.rss</code></td>
319 |                     <td><a href="#button" class="button icon rss">Subscribe to RSS feed</a></td>
320 |                 </tr>
321 |                 <tr>
322 |                     <td scope="row"><code>.tag</code></td>
323 |                     <td><a href="#button" class="button icon tag">Add tag</a></td>
324 |                 </tr>
325 |                 <tr>
326 |                     <td scope="row"><code>.trash</code></td>
327 |                     <td><a href="#button" class="button danger icon trash">Delete post</a></td>
328 |                 </tr>
329 |                 <tr>
330 |                     <td scope="row"><code>.user</code></td>
331 |                     <td><a href="#button" class="button icon user">Add new user</a></td>
332 |                 </tr>
333 |             </table>
334 |         </div>
335 |     </div>
336 | 
337 |     <div class="section">
338 |         <h2>Browser compatibility</h2>
339 |         <p>Firefox 3.5+, Google Chrome, Safari 4+, IE 8+, Opera 10+.</p>
340 |         <p><strong>Note:</strong> 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.</p>
341 |     </div>
342 | 
343 |     <div class="section">
344 |         <h2>License</h2>
345 |         <p>Public domain: <a href="http://unlicense.org/">http://unlicense.org/</a></p>
346 |     </div>
347 | 
348 |     <div class="section">
349 |         <h2>Acknowledgements</h2>
350 |         <p>Inspired by <a href="http://michaelhenriksen.dk">Michael Henriksen</a>'s <a href="http://github.com/michenriksen/css3buttons">CSS3 Buttons</a>. Icons from <a href="http://somerandomdude.com/projects/iconic/">Iconic pack</a>.</p>
351 |     </div>
352 | </div>
353 | 
354 | <div class="footer">
355 |     <a href="http://github.com/necolas/css3-github-buttons">CSS3 GitHub Buttons</a> by <a href="http://nicolasgallagher.com" title="Website of Nicolas Gallagher">Nicolas Gallagher</a>.
356 | </div>
357 | 
358 | </body>
359 | </html>


--------------------------------------------------------------------------------