Permalink
Switch branches/tags
Nothing to show
Find file
Fetching contributors…
Cannot retrieve contributors at this time
499 lines (493 sloc) 20.7 KB
<!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">
<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="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>
</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="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="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>
&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></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>
<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">
<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>
<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/CodeFusion/css3-github-buttons">CSS3 GitHub Buttons</a> by <a href="http://codefusionlab.com.com" title="CodeFusion,com">CodeFusion</a>. </div>
</body>
</html>