Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Added Colors to most examples.

Added Small class Example.
Cleaned up formatting and layout.
  • Loading branch information...
commit 7c07c6bb5e1610d832a3765b7edff779fd36aef6 1 parent f1448bb
@CodeFusion authored
Showing with 480 additions and 439 deletions.
  1. +480 −439 index.html
View
919 index.html
@@ -1,458 +1,499 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
- <meta charset="utf-8">
- <title>CSS3 GitHub Buttons</title>
- <meta name="description" content="Using CSS3 to create GitHub-style buttons from links, buttons, and inputs">
- <style>
- /* ------------------------------------------------------------------------------------------------------------- RESET */
-
- html, body, div, form, p,
- code, pre { margin: 0; padding: 0; border: 0; vertical-align: baseline; }
-
- /* ------------------------------------------------------------------------------------------------------------- TEMPLATE */
-
- body { font: 14px/1.333 sans-serif; color: #444; background: #eee; }
-
- a { color: #980905; }
- a:hover, a:focus, a:active { text-decoration: none; }
-
- h1 { margin: 0 0 0.5em; font-size: 36px; }
- h2 { margin: 0 0 0.75em; font-size: 21px; }
- h3 { margin: 0 0 0.333em; font-size: 16px; font-weight: normal; }
- p { margin: 0 0 1.333em; }
- em { font-style: italic; }
- table { border-collapse: separate; border-spacing: 0; margin: 0; vertical-align: middle; }
- th { font-weight: bold; }
- th, td { padding: 5px 25px 5px 5px; text-align: left; vertical-align: middle; }
- pre, code { font-family: monospace, sans-serif; font-size: 1em; color:#080; }
-
- /* ------------------------------------------------------------------------------------------------------------- TEMPLATE */
-
- .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); }
-
- .container pre,
- .container .prettyprint { padding: 0; border: 0; margin: 0 0 20px; font-size: 13px; background: #fff; }
-
- .ribbon { position: absolute; top: -1px; right: -1px; opacity: 0.9; }
- .ribbon:hover, .ribbon:focus, .ribbon:active { opacity: 1; }
- .ribbon img { display: block; border: 0; }
-
- .header { padding-right:80px; }
-
- .section { margin: 40px 0 20px; }
-
- .example { padding: 20px; border: 1px solid #ccc; margin: 10px -20px 20px; }
-
- .footer { margin: 20px 0 50px; font-size: 11px; color: #666; text-align: center; }
- .footer a { color: #666; }
- </style>
-
- <link rel="stylesheet" href="gh-buttons.css">
-
- <!-- prettyify -->
- <link rel="stylesheet" href="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css">
- <script src="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js"></script>
-</head>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <title>CSS3 GitHub Buttons</title>
+ <meta name="description" content="Using CSS3 to create GitHub-style buttons from links, buttons, and inputs">
+ <style>
+ /* ------------------------------------------------------------------------------------------------------------- RESET */
+
+ html, body, div, form, p, code, pre {
+ margin: 0;
+ padding: 0;
+ border: 0;
+ vertical-align: baseline;
+ }
+ /* ------------------------------------------------------------------------------------------------------------- TEMPLATE */
+
+ body {
+ font: 14px/1.333 sans-serif;
+ color: #444;
+ background: #eee;
+ }
+ a {
+ color: #980905;
+ }
+ a:hover, a:focus, a:active {
+ text-decoration: none;
+ }
+ h1 {
+ margin: 0 0 0.5em;
+ font-size: 36px;
+ }
+ h2 {
+ margin: 0 0 0.75em;
+ font-size: 21px;
+ }
+ h3 {
+ margin: 0 0 0.333em;
+ font-size: 16px;
+ font-weight: normal;
+ }
+ p {
+ margin: 0 0 1.333em;
+ }
+ em {
+ font-style: italic;
+ }
+ table {
+ border-collapse: separate;
+ border-spacing: 0;
+ margin: 0;
+ vertical-align: middle;
+ }
+ th {
+ font-weight: bold;
+ }
+ th, td {
+ padding: 5px 25px 5px 5px;
+ text-align: left;
+ vertical-align: middle;
+ }
+ pre, code {
+ font-family: monospace, sans-serif;
+ font-size: 1em;
+ color:#080;
+ }
+ /* ------------------------------------------------------------------------------------------------------------- TEMPLATE */
+
+ .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);
+ }
+ .container pre, .container .prettyprint {
+ padding: 0;
+ border: 0;
+ margin: 0 0 20px;
+ font-size: 13px;
+ background: #fff;
+ }
+ .ribbon {
+ position: absolute;
+ top: -1px;
+ right: -1px;
+ opacity: 0.9;
+ }
+ .ribbon:hover, .ribbon:focus, .ribbon:active {
+ opacity: 1;
+ }
+ .ribbon img {
+ display: block;
+ border: 0;
+ }
+ .header {
+ padding-right:80px;
+ }
+ .section {
+ margin: 40px 0 20px;
+ }
+ .example {
+ padding: 20px;
+ border: 1px solid #ccc;
+ margin: 10px -20px 20px;
+ }
+ .footer {
+ margin: 20px 0 50px;
+ font-size: 11px;
+ color: #666;
+ text-align: center;
+ }
+ .footer a {
+ color: #666;
+ }
+ </style>
+ <link rel="stylesheet" href="gh-buttons.css">
+
+ <!-- prettyify -->
+ <link rel="stylesheet" href="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css">
+ <script src="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js"></script>
+</head>
<body onload="prettyPrint()">
-
+<div class="container"> <a class="ribbon" href="http://github.com/CodeFusion/css3-github-buttons" target="_blank"><img src="http://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" alt="Fork me on GitHub"></a>
+ <div class="header">
+ <h1>CSS3 GitHub Buttons</h1>
+ <p><b><a href="http://github.com/CodeFusion/css3-github-buttons" title="GitHub repository">CSS3 GitHub Buttons</a> helps you easily create GitHub-style buttons from links, buttons, and inputs.</b></p>
+ </div>
+</div>
<div class="container">
- <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>
-
- <div class="header">
- <h1>CSS3 GitHub Buttons</h1>
- <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>
+ <h2>Menu</h2>
+ <div class="button-group"> <a href="./index.html" class="button primary gh-dblue big active">Added Colors</a> <a href="./ext_button_icons/index.html" class="button big">Extended Icons</a> <a href="./ext_button_size/index.html" class="button big">Extended Sizes</a> <a href="./ext_button_all/index.html" class="button big">Fully Loaded</a> </div>
+ <p>This includes the base package by <a href="https://github.com/necolas/css3-github-buttons">necolas</a> with a few corrections & additions:<br />
+ &bull; Fixed "danger" in minor group.<br />
+ &bull; Fixed padding for no text.<br />
+ &bull; Added "disabled" class<br />
+ &bull; Added "colors"</p>
+</div>
+<div class="container">
+ <div class="section">
+ <h2>Buttons</h2>
+ <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>
+ <div class="example">
+ <pre class="code prettyprint"><code>&lt;a href="#" class="button">Post comment (link)&lt;/a>
+&lt;input class="button" type="submit" value="Post comment (input)">
+&lt;button class="button" type="submit">Post comment (button)&lt;/button></code></pre>
+ <form>
+ <a href="#button" class="button">Post comment (link)</a>
+ <input class="button" type="submit" value="Post comment (input)">
+ <button class="button" type="submit">Post comment (button)</button>
+ </form>
</div>
-
- <div class="section">
- <h2>Buttons</h2>
- <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>
-
- <div class="example">
- <pre class="code prettyprint"><code>&lt;a href="#" class="button">Post comment&lt;/a></code></pre>
- <form>
- <a href="#button" class="button">Post comment (link)</a>
- <input class="button" type="submit" value="Post comment (input)">
- <button class="button" type="submit">Post comment (button)</button>
- </form>
- </div>
-
- <div class="example">
- <pre class="prettyprint"><code>&lt;a href="#" class="button pill">This is a pill button&lt;/a></code></pre>
- <a href="#button" class="button pill">This is a pill button</a>
- </div>
-
- <div class="example">
- <pre class="prettyprint"><code>&lt;a href="#" class="button primary">Publish post&lt;/a>
+ <div class="example">
+ <pre class="prettyprint"><code>&lt;a href="#" class="button pill">This is a pill button&lt;/a></code></pre>
+ <a href="#button" class="button pill">This is a pill button</a> </div>
+ <div class="example">
+ <pre class="prettyprint"><code>&lt;a href="#" class="button primary">Publish post&lt;/a>
&lt;a href="#" class="button">Save as draft&lt;/a></code></pre>
- <a href="#button" class="button primary">Publish post</a> <a href="#button" class="button">Save as draft</a>
- </div>
+ <a href="#button" class="button primary">Publish post</a> <a href="#button" class="button">Save as draft</a> </div>
+ </div>
+ <div class="section">
+ <h2>Buttons with dangerous actions</h2>
+ <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>
+ <div class="example">
+ <pre class="prettyprint"><code>&lt;a href="#" class="button danger">Delete post&lt;/a></code></pre>
+ <a href="#button" class="button danger">Delete post</a> </div>
+ </div>
+ <div class="section">
+ <h2>Big buttons</h2>
+ <p>If you wish to emphasize a specific action you can add the class <code>big</code>.</p>
+ <div class="example">
+ <pre class="prettyprint"><code>&lt;a href="#" class="button big">Create Project&lt;/a>
+&lt;a href="#button" class="button big icon approve">Big w/ icon&lt;/a></code></pre>
+ <a href="#button" class="button big">Create Project</a> <a href="#button" class="button big icon approve">Big w/ icon</a> </div>
+ </div>
+ <div class="section">
+ <h2>Small buttons</h2>
+ <p>As a companion to big, we now have <code>small</code>.</p>
+ <div class="example">
+ <pre class="prettyprint"><code>&lt;a href="#" class="button big">Create Project&lt;/a>
+&lt;a href="#button" class="button small icon approve">Small w/ icon&lt;/a></code></pre>
+ <a href="#button" class="button small">Create Project</a> <a href="#button" class="button small icon approve">Small w/ icon</a> </div>
+ </div>
+ <div class="section">
+ <h2>Grouped buttons</h2>
+ <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>
+ <div class="example">
+ <pre class="prettyprint"><code>&lt;div class="button-group">
+&lt;a href="#" class="button primary">Dashboard&lt;/a>
+&lt;a href="#" class="button">Inbox&lt;/a>
+&lt;a href="#" class="button">Account&lt;/a>
+&lt;a href="#" class="button">Logout&lt;/a>
+&lt;/div></code></pre>
+ <div class="button-group"> <a href="#button" class="button primary">Dashboard</a> <a href="#button" class="button">Inbox</a> <a href="#button" class="button">Account</a> <a href="#button" class="button">Logout</a> <a href="#button" class="button danger">Danger</a> <a href="#button" class="button gh-lblue">Colored</a> <a href="#button" class="button gh-green icon approve">Icon</a> </div>
</div>
-
- <div class="section">
- <h2>Buttons with dangerous actions</h2>
- <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>
- <div class="example">
- <pre class="prettyprint"><code>&lt;a href="#" class="button danger">Delete post&lt;/a></code></pre>
- <a href="#button" class="button danger">Delete post</a>
- </div>
+ <div class="example">
+ <pre class="prettyprint"><code>&lt;ul class="button-group">
+&lt;li>&lt;a href="#" class="button primary pill">Dashboard&lt;/a>&lt;/li>
+&lt;li>&lt;a href="#" class="button pill">Inbox&lt;/a>&lt;/li>
+&lt;li>&lt;a href="#" class="button pill">Account&lt;/a>&lt;/li>
+&lt;li>&lt;a href="#" class="button pill">Logout&lt;/a>&lt;/li>
+&lt;/ul></code></pre>
+ <ul class="button-group">
+ <li><a href="#button" class="button primary pill">Dashboard</a></li>
+ <li><a href="#button" class="button pill">Inbox</a></li>
+ <li><a href="#button" class="button pill">Account</a></li>
+ <li><a href="#button" class="button pill">Logout</a></li>
+ <li><a href="#button" class="button danger pill">Danger</a></li>
+ <li><a href="#button" class="button gh-lblue pill">Colored</a></li>
+ <li><a href="#button" class="button gh-green icon approve pill">Icon</a></li>
+ </ul>
</div>
-
- <div class="section">
- <h2>Big buttons</h2>
- <p>If you wish to emphasize a specific action you can add the class <code>big</code>.</p>
-
- <div class="example">
- <pre class="prettyprint"><code>&lt;a href="#" class="button big">Create Project&lt;/a></code></pre>
- <a href="#button" class="button big">Create Project</a>
- </div>
+ <div class="example">
+ <pre class="prettyprint"><code>&lt;div class="button-group <b>minor-group</b>">&hellip;&lt;/div></code></pre>
+ <div class="button-group minor-group"> <a href="#button" class="button primary">Dashboard</a> <a href="#button" class="button">Inbox</a> <a href="#button" class="button">Account</a> <a href="#button" class="button">Logout</a> <a href="#button" class="button danger">Danger</a> <a href="#button" class="button gh-lblue pill">Colored</a> <a href="#button" class="button gh-green icon approve pill">Icon</a> </div>
</div>
+ </div>
+ <div class="section">
+ <h2>Mixed groups</h2>
+ <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>
+ <div class="example">
+ <pre class="prettyprint"><code>&lt;div class="actions <b>button-container</b>">
+&lt;a href="#" class="button primary">Compose new&lt;/a>
- <div class="section">
- <h2>Grouped buttons</h2>
- <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>
-
- <div class="example">
-<pre class="prettyprint"><code>&lt;div class="button-group">
- &lt;a href="#" class="button primary">Dashboard&lt;/a>
- &lt;a href="#" class="button">Inbox&lt;/a>
- &lt;a href="#" class="button">Account&lt;/a>
- &lt;a href="#" class="button">Logout&lt;/a>
-&lt;/div></code></pre>
- <div class="button-group">
- <a href="#button" class="button primary">Dashboard</a>
- <a href="#button" class="button">Inbox</a>
- <a href="#button" class="button">Account</a>
- <a href="#button" class="button">Logout</a>
- </div>
- </div>
-
- <div class="example">
-<pre class="prettyprint"><code>&lt;ul class="button-group">
- &lt;li>&lt;a href="#" class="button primary pill">Dashboard&lt;/a>&lt;/li>
- &lt;li>&lt;a href="#" class="button pill">Inbox&lt;/a>&lt;/li>
- &lt;li>&lt;a href="#" class="button pill">Account&lt;/a>&lt;/li>
- &lt;li>&lt;a href="#" class="button pill">Logout&lt;/a>&lt;/li>
-&lt;/ul></code></pre>
- <ul class="button-group">
- <li><a href="#button" class="button primary pill">Dashboard</a></li>
- <li><a href="#button" class="button pill">Inbox</a></li>
- <li><a href="#button" class="button pill">Account</a></li>
- <li><a href="#button" class="button pill">Logout</a></li>
- </ul>
- </div>
-
- <div class="example">
-<pre class="prettyprint"><code>&lt;div class="button-group <b>minor-group</b>">&hellip;&lt;/div></code></pre>
- <div class="button-group minor-group">
- <a href="#button" class="button primary">Dashboard</a>
- <a href="#button" class="button">Inbox</a>
- <a href="#button" class="button">Account</a>
- <a href="#button" class="button">Logout</a>
- <a href="#button" class="button danger">Nuke</a>
- </div>
- </div>
- </div>
+&lt;div class="button-group">
+&lt;a href="#" class="button primary">Archive&lt;/a>
+&lt;a href="#" class="button">Report spam&lt;/a>
+&lt;a href="#" class="button danger">Delete&lt;/a>
+&lt;/div>
- <div class="section">
- <h2>Mixed groups</h2>
- <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>
-
- <div class="example">
-<pre class="prettyprint"><code>&lt;div class="actions <b>button-container</b>">
- &lt;a href="#" class="button primary">Compose new&lt;/a>
-
- &lt;div class="button-group">
- &lt;a href="#" class="button primary">Archive&lt;/a>
- &lt;a href="#" class="button">Report spam&lt;/a>
- &lt;a href="#" class="button danger">Delete&lt;/a>
- &lt;/div>
-
- &lt;div class="button-group minor-group">
- &lt;a href="#" class="button">Move to&lt;/a>
- &lt;a href="#" class="button">Labels&lt;/a>
- &lt;/div>
+&lt;div class="button-group minor-group">
+&lt;a href="#" class="button">Move to&lt;/a>
+&lt;a href="#" class="button">Labels&lt;/a>
+&lt;/div>
&lt;/div></code></pre>
- <div class="actions button-container">
- <a href="#button" class="button primary">Compose new</a>
-
- <div class="button-group">
- <a href="#button" class="button primary">Archive</a>
- <a href="#button" class="button">Report spam</a>
- <a href="#button" class="button danger">Delete</a>
- </div>
-
- <div class="button-group minor-group">
- <a href="#button" class="button">Move to</a>
- <a href="#button" class="button danger">Danger</a>
- <a href="#button" class="button">Labels</a>
- </div>
- </div>
- </div>
+ <div class="actions button-container"> <a href="#button" class="button primary">Compose new</a>
+ <div class="button-group"> <a href="#button" class="button primary">Archive</a> <a href="#button" class="button">Report spam</a> <a href="#button" class="button danger">Delete</a> </div>
+ <div class="button-group minor-group"> <a href="#button" class="button">Move to</a> <a href="#button" class="button danger">Danger</a> <a href="#button" class="button">Labels</a> </div>
+ </div>
</div>
-
- <div class="section">
- <h2>Buttons with icons</h2>
- <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>
-
- <div class="example">
- <pre class="prettyprint"><code>&lt;a href="#" class="button icon search">Search&lt;/a></code></pre>
- <a href="#button" class="button icon search">Search</a>
- </div>
-
- <div class="example">
- <table>
- <thead>
- <tr>
- <th scope="col">Class</th>
- <th scope="col">Example</th>
- </tr>
- </thead>
- <tr>
- <td scope="row"><code>.arrowup</code></td>
- <td><a href="#button" class="button icon arrowup">Move up</a></td>
- </tr>
- <tr>
- <td scope="row"><code>.arrowdown</code></td>
- <td><a href="#button" class="button icon arrowdown">Move down</a></td>
- </tr>
- <tr>
- <td scope="row"><code>.arrowleft</code></td>
- <td><a href="#button" class="button icon arrowleft">Move left</a></td>
- </tr>
- <tr>
- <td scope="row"><code>.arrowright</code></td>
- <td><a href="#button" class="button icon arrowright">Move right</a></td>
- </tr>
- <tr>
- <td scope="row"><code>.approve</code></td>
- <td><a href="#button" class="button icon approve">Approve registration</a></td>
- </tr>
- <tr>
- <td scope="row"><code>.add</code></td>
- <td><a href="#button" class="button icon add">Add post</a></td>
- </tr>
- <tr>
- <td scope="row"><code>.remove</code></td>
- <td><a href="#button" class="button danger icon remove">Remove item</a></td>
- </tr>
- <tr>
- <td scope="row"><code>.log</code></td>
- <td><a href="#button" class="button icon log">View log</a></td>
- </tr>
- <tr>
- <td scope="row"><code>.calendar</code></td>
- <td><a href="#button" class="button icon calendar">Add to calendar</a></td>
- </tr>
- <tr>
- <td scope="row"><code>.chat</code></td>
- <td><a href="#button" class="button icon chat">Start chat</a></td>
- </tr>
- <tr>
- <td scope="row"><code>.clock</code></td>
- <td><a href="#button" class="button icon clock">Start timer</a></td>
- </tr>
- <tr>
- <td scope="row"><code>.settings</code></td>
- <td><a href="#button" class="button icon settings">Settings</a></td>
- </tr>
- <tr>
- <td scope="row"><code>.comment</code></td>
- <td><a href="#button" class="button icon comment">Add comment</a></td>
- </tr>
- <tr>
- <td scope="row"><code>.fork</code></td>
- <td><a href="#button" class="button icon fork">Fork</a></td>
- </tr>
- <tr>
- <td scope="row"><code>.like</code></td>
- <td><a href="#button" class="button icon like">Like</a></td>
- </tr>
- <tr>
- <td scope="row"><code>.favorite</code></td>
- <td><a href="#button" class="button icon favorite">Favorite</a></td>
- </tr>
- <tr>
- <td scope="row"><code>.home</code></td>
- <td><a href="#button" class="button icon home">Back to homepage</a></td>
- </tr>
- <tr>
- <td scope="row"><code>.key</code></td>
- <td><a href="#button" class="button icon key">Password protect</a></td>
- </tr>
- <tr>
- <td scope="row"><code>.lock</code></td>
- <td><a href="#button" class="button icon lock">Lock</a></td>
- </tr>
- <tr>
- <td scope="row"><code>.unlock</code></td>
- <td><a href="#button" class="button icon unlock">Unlock</a></td>
- </tr>
- <tr>
- <td scope="row"><code>.loop</code></td>
- <td><a href="#button" class="button icon loop">Resend message</a></td>
- </tr>
- <tr>
- <td scope="row"><code>.search</code></td>
- <td><a href="#button" class="button icon search">Search</a></td>
- </tr>
- <tr>
- <td scope="row"><code>.mail</code></td>
- <td><a href="#button" class="button icon mail">Send email</a></td>
- </tr>
- <tr>
- <td scope="row"><code>.move</code></td>
- <td><a href="#button" class="button icon move">Move</a></td>
- </tr>
- <tr>
- <td scope="row"><code>.edit</code></td>
- <td><a href="#button" class="button icon edit">Edit post</a></td>
- </tr>
- <tr>
- <td scope="row"><code>.pin</code></td>
- <td><a href="#button" class="button icon pin">Pin to Map</a></td>
- </tr>
- <tr>
- <td scope="row"><code>.reload</code></td>
- <td><a href="#button" class="button icon reload">Reload page</a></td>
- </tr>
- <tr>
- <td scope="row"><code>.rss</code></td>
- <td><a href="#button" class="button icon rss">Subscribe to RSS feed</a></td>
- </tr>
- <tr>
- <td scope="row"><code>.tag</code></td>
- <td><a href="#button" class="button icon tag">Add tag</a></td>
- </tr>
- <tr>
- <td scope="row"><code>.trash</code></td>
- <td><a href="#button" class="button danger icon trash">Delete post</a></td>
- </tr>
- <tr>
- <td scope="row"><code>.user</code></td>
- <td><a href="#button" class="button icon user">Add new user</a></td>
- </tr>
- <tr>
- <td scope="row"><code>.user .no-text</code></td>
- <td><a href="#button" class="button icon user no-text"></a></td>
- </tr>
- </table>
- </div>
+ </div>
+ <div class="section">
+ <h2>Buttons with icons</h2>
+ <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>
+ <div class="example">
+ <pre class="prettyprint"><code>&lt;a href="#" class="button icon search">Search&lt;/a></code></pre>
+ <a href="#button" class="button icon search">Search</a> </div>
+ <div class="example">
+ <table>
+ <thead>
+ <tr>
+ <th scope="col">Class</th>
+ <th scope="col">Example</th>
+ </tr>
+ </thead>
+ <tr>
+ <td scope="row"><code>.arrowup</code></td>
+ <td><a href="#button" class="button icon arrowup">Move up</a></td>
+ </tr>
+ <tr>
+ <td scope="row"><code>.arrowdown</code></td>
+ <td><a href="#button" class="button icon arrowdown">Move down</a></td>
+ </tr>
+ <tr>
+ <td scope="row"><code>.arrowleft</code></td>
+ <td><a href="#button" class="button icon arrowleft">Move left</a></td>
+ </tr>
+ <tr>
+ <td scope="row"><code>.arrowright</code></td>
+ <td><a href="#button" class="button icon arrowright">Move right</a></td>
+ </tr>
+ <tr>
+ <td scope="row"><code>.approve</code></td>
+ <td><a href="#button" class="button icon approve">Approve registration</a></td>
+ </tr>
+ <tr>
+ <td scope="row"><code>.add</code></td>
+ <td><a href="#button" class="button icon add">Add post</a></td>
+ </tr>
+ <tr>
+ <td scope="row"><code>.remove</code></td>
+ <td><a href="#button" class="button danger icon remove">Remove item</a></td>
+ </tr>
+ <tr>
+ <td scope="row"><code>.log</code></td>
+ <td><a href="#button" class="button icon log">View log</a></td>
+ </tr>
+ <tr>
+ <td scope="row"><code>.calendar</code></td>
+ <td><a href="#button" class="button icon calendar">Add to calendar</a></td>
+ </tr>
+ <tr>
+ <td scope="row"><code>.chat</code></td>
+ <td><a href="#button" class="button icon chat">Start chat</a></td>
+ </tr>
+ <tr>
+ <td scope="row"><code>.clock</code></td>
+ <td><a href="#button" class="button icon clock">Start timer</a></td>
+ </tr>
+ <tr>
+ <td scope="row"><code>.settings</code></td>
+ <td><a href="#button" class="button icon settings">Settings</a></td>
+ </tr>
+ <tr>
+ <td scope="row"><code>.comment</code></td>
+ <td><a href="#button" class="button icon comment">Add comment</a></td>
+ </tr>
+ <tr>
+ <td scope="row"><code>.fork</code></td>
+ <td><a href="#button" class="button icon fork">Fork</a></td>
+ </tr>
+ <tr>
+ <td scope="row"><code>.like</code></td>
+ <td><a href="#button" class="button icon like">Like</a></td>
+ </tr>
+ <tr>
+ <td scope="row"><code>.favorite</code></td>
+ <td><a href="#button" class="button icon favorite">Favorite</a></td>
+ </tr>
+ <tr>
+ <td scope="row"><code>.home</code></td>
+ <td><a href="#button" class="button icon home">Back to homepage</a></td>
+ </tr>
+ <tr>
+ <td scope="row"><code>.key</code></td>
+ <td><a href="#button" class="button icon key">Password protect</a></td>
+ </tr>
+ <tr>
+ <td scope="row"><code>.lock</code></td>
+ <td><a href="#button" class="button icon lock">Lock</a></td>
+ </tr>
+ <tr>
+ <td scope="row"><code>.unlock</code></td>
+ <td><a href="#button" class="button icon unlock">Unlock</a></td>
+ </tr>
+ <tr>
+ <td scope="row"><code>.loop</code></td>
+ <td><a href="#button" class="button icon loop">Resend message</a></td>
+ </tr>
+ <tr>
+ <td scope="row"><code>.search</code></td>
+ <td><a href="#button" class="button icon search">Search</a></td>
+ </tr>
+ <tr>
+ <td scope="row"><code>.mail</code></td>
+ <td><a href="#button" class="button icon mail">Send email</a></td>
+ </tr>
+ <tr>
+ <td scope="row"><code>.move</code></td>
+ <td><a href="#button" class="button icon move">Move</a></td>
+ </tr>
+ <tr>
+ <td scope="row"><code>.edit</code></td>
+ <td><a href="#button" class="button icon edit">Edit post</a></td>
+ </tr>
+ <tr>
+ <td scope="row"><code>.pin</code></td>
+ <td><a href="#button" class="button icon pin">Pin to Map</a></td>
+ </tr>
+ <tr>
+ <td scope="row"><code>.reload</code></td>
+ <td><a href="#button" class="button icon reload">Reload page</a></td>
+ </tr>
+ <tr>
+ <td scope="row"><code>.rss</code></td>
+ <td><a href="#button" class="button icon rss">Subscribe to RSS feed</a></td>
+ </tr>
+ <tr>
+ <td scope="row"><code>.tag</code></td>
+ <td><a href="#button" class="button icon tag">Add tag</a></td>
+ </tr>
+ <tr>
+ <td scope="row"><code>.trash</code></td>
+ <td><a href="#button" class="button danger icon trash">Delete post</a></td>
+ </tr>
+ <tr>
+ <td scope="row"><code>.user</code></td>
+ <td><a href="#button" class="button icon user">Add new user</a></td>
+ </tr>
+ <tr>
+ <td scope="row"><code>.user</code></td>
+ <td><a href="#button" class="button icon user no-text"></a></td>
+ </tr>
+ </table>
</div>
+ </div>
+ <div class="example">
+ <h1>Colors</h1>
+ <table>
+ <thead>
+ <tr>
+ <th scope="col">Class</th>
+ <th scope="col">Example</th>
+ <th scope="col">Active</th>
+ </tr>
+ </thead>
+ <tr>
+ <td scope="row"><code>[none]</code></td>
+ <td><a href="#button" class="button">Default</a></td>
+ <td><a href="#button" class="button active">Default</a></td>
+ </tr>
+ <tr>
+ <td scope="row"><code>.gh-red<br />
+ .danger</code></td>
+ <td><a href="#button" class="button gh-red">Red</a></td>
+ <td><a href="#button" class="button gh-red active">Red</a></td>
+ </tr>
+ <tr>
+ <td scope="row"><code>.gh-green</code></td>
+ <td><a href="#button" class="button gh-green">Green</a></td>
+ <td><a href="#button" class="button gh-green active">Green</a></td>
+ </tr>
+ <tr>
+ <td scope="row"><code>.gh-orange</code></td>
+ <td><a href="#button" class="button gh-orange">Orange</a></td>
+ <td><a href="#button" class="button gh-orange active">Orange</a></td>
+ </tr>
+ <tr>
+ <td scope="row"><code>.gh-purple</code></td>
+ <td><a href="#button" class="button gh-purple">Purple</a></td>
+ <td><a href="#button" class="button gh-purple active">Purple</a></td>
+ </tr>
+ <tr>
+ <td scope="row"><code>.gh-brown</code></td>
+ <td><a href="#button" class="button gh-brown">Brown</a></td>
+ <td><a href="#button" class="button gh-brown active">Brown</a></td>
+ </tr>
+ <tr>
+ <td scope="row"><code>.gh-black</code></td>
+ <td><a href="#button" class="button gh-black">Black</a></td>
+ <td><a href="#button" class="button gh-black active">Black</a></td>
+ </tr>
+ <tr>
+ <td scope="row"><code>.gh-white</code></td>
+ <td><a href="#button" class="button gh-white">White</a></td>
+ <td><a href="#button" class="button gh-white active">White</a></td>
+ </tr>
+ <tr>
+ <td scope="row"><code>.gh-pink</code></td>
+ <td><a href="#button" class="button gh-pink">Pink</a></td>
+ <td><a href="#button" class="button gh-pink active">Pink</a></td>
+ </tr>
+ <tr>
+ <td scope="row"><code>.gh-lime</code></td>
+ <td><a href="#button" class="button gh-lime">Lime</a></td>
+ <td><a href="#button" class="button gh-lime active">Lime</a></td>
+ </tr>
+ <tr>
+ <td scope="row"><code>.gh-yellow</code></td>
+ <td><a href="#button" class="button gh-yellow">Yellow</a></td>
+ <td><a href="#button" class="button gh-yellow active">Yellow</a></td>
+ </tr>
+ <tr>
+ <td scope="row"><code>.gh-lblue</code></td>
+ <td><a href="#button" class="button gh-lblue">Light Blue</a></td>
+ <td><a href="#button" class="button gh-lblue active">Light Blue</a></td>
+ </tr>
+ <tr>
+ <td scope="row"><code>.gh-dblue</code></td>
+ <td><a href="#button" class="button gh-dblue">Dark Blue</a></td>
+ <td><a href="#button" class="button gh-dblue active">Dark Blue</a></td>
+ </tr>
+ </table>
+ </div>
+ <div class="section">
+ <h2>Disabled buttons</h2>
+ <p>A visual way to show a diabled state</p>
<div class="example">
- <h1>Colors</h1>
- <table>
- <thead>
- <tr>
- <th scope="col">Class</th>
- <th scope="col">Example</th>
- <th scope="col">Active</th>
- </tr>
- </thead>
- <tr>
- <td scope="row"><code>[none]</code></td>
- <td><a href="#button" class="button">Default</a></td>
- <td><a href="#button" class="button active">Default</a></td>
- </tr>
- <tr>
- <td scope="row"><code>.gh-red<br />.danger</code></td>
- <td><a href="#button" class="button gh-red">Red</a></td>
- <td><a href="#button" class="button gh-red active">Red</a></td>
- </tr>
- <tr>
- <td scope="row"><code>.gh-green</code></td>
- <td><a href="#button" class="button gh-green">Green</a></td>
- <td><a href="#button" class="button gh-green active">Green</a></td>
- </tr>
- <tr>
- <td scope="row"><code>.gh-orange</code></td>
- <td><a href="#button" class="button gh-orange">Orange</a></td>
- <td><a href="#button" class="button gh-orange active">Orange</a></td>
- </tr>
- <tr>
- <td scope="row"><code>.gh-purple</code></td>
- <td><a href="#button" class="button gh-purple">Purple</a></td>
- <td><a href="#button" class="button gh-purple active">Purple</a></td>
- </tr>
- <tr>
- <td scope="row"><code>.gh-brown</code></td>
- <td><a href="#button" class="button gh-brown">Brown</a></td>
- <td><a href="#button" class="button gh-brown active">Brown</a></td>
- </tr>
- <tr>
- <td scope="row"><code>.gh-black</code></td>
- <td><a href="#button" class="button gh-black">Black</a></td>
- <td><a href="#button" class="button gh-black active">Black</a></td>
- </tr>
- <tr>
- <td scope="row"><code>.gh-white</code></td>
- <td><a href="#button" class="button gh-white">White</a></td>
- <td><a href="#button" class="button gh-white active">White</a></td>
- </tr>
- <tr>
- <td scope="row"><code>.gh-pink</code></td>
- <td><a href="#button" class="button gh-pink">Pink</a></td>
- <td><a href="#button" class="button gh-pink active">Pink</a></td>
- </tr>
-
- <tr>
- <td scope="row"><code>.gh-lime</code></td>
- <td><a href="#button" class="button gh-lime">Lime</a></td>
- <td><a href="#button" class="button gh-lime active">Lime</a></td>
- </tr>
- <tr>
- <td scope="row"><code>.gh-yellow</code></td>
- <td><a href="#button" class="button gh-yellow">Yellow</a></td>
- <td><a href="#button" class="button gh-yellow active">Yellow</a></td>
- </tr>
- <tr>
- <td scope="row"><code>.gh-lblue</code></td>
- <td><a href="#button" class="button gh-lblue">Light Blue</a></td>
- <td><a href="#button" class="button gh-lblue active">Light Blue</a></td>
- </tr>
- <tr>
- <td scope="row"><code>.gh-dblue</code></td>
- <td><a href="#button" class="button gh-dblue">Dark Blue</a></td>
- <td><a href="#button" class="button gh-dblue active">Dark Blue</a></td>
- </tr>
-
- </table>
- </div>
- <div class="section">
- <h2>Disabled buttons</h2>
- <p>A visual way to show a diabled state</p>
-
- <div class="example">
- <pre class="prettyprint"><code>&lt;a href="#button" class="button big disabled">Link Disabled&lt;/a>
+ <pre class="prettyprint"><code>&lt;a href="#button" class="button big disabled">Link Disabled&lt;/a>
&lt;input type="submit" class="button big disabled" value="Input Disabled" />
&lt;button class="button big disabled gh-green">Button Disabled&lt;/button></code></pre>
-
- <a href="#button" class="button big disabled">Link Disabled</a>
- <input type="submit" class="button big" value="Input Disabled" disabled="disabled" />
- <button class="button big disabled gh-green">Button Disabled</button>
-
- </div>
- </div>
- <div class="section">
- <h2>Browser compatibility</h2>
- <p>Firefox 3.5+, Google Chrome, Safari 4+, IE 8+, Opera 10+.</p>
- <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>
- </div>
-
- <div class="section">
- <h2>License</h2>
- <p>Public domain: <a href="http://unlicense.org/">http://unlicense.org/</a></p>
- </div>
-
- <div class="section">
- <h2>Acknowledgements</h2>
- <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>
+ <a href="#button" class="button big disabled">Link Disabled</a>
+ <input type="submit" class="button big" value="Input Disabled" disabled="disabled" />
+ <button class="button big disabled gh-green">Button Disabled</button>
</div>
+ </div>
+ <div class="section">
+ <h2>Browser compatibility</h2>
+ <p>Firefox 3.5+, Google Chrome, Safari 4+, IE 8+, Opera 10+.</p>
+ <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>
+ </div>
+ <div class="section">
+ <h2>License</h2>
+ <p>Public domain: <a href="http://unlicense.org/">http://unlicense.org/</a></p>
+ </div>
+ <div class="section">
+ <h2>Acknowledgements</h2>
+ <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>
+ <p>Forked from <a href="http://github.com/necolas/css3-github-buttons">necolas - CSS3 GitHub Buttons</a>.</p>
+ </div>
</div>
-
-<div class="footer">
- <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>.
-</div>
-
+<div class="footer"> <a href="http://github.com/CodeFusion/css3-github-buttons">CSS3 GitHub Buttons</a> by <a href="http://codefusionlab.com.com" title="CodeFusion,com">CodeFusion</a>. </div>
</body>
</html>
Please sign in to comment.
Something went wrong with that request. Please try again.