Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Branch: master
Fetching contributors…

Cannot retrieve contributors at this time

359 lines (317 sloc) 17.157 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/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>
</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>
&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></code></pre>
<a href="#button" class="button big">Create Project</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>
</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>
</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">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>
</table>
</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>
</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>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.