Permalink
Browse files

Renamed files and directories. Reorganised example page HTML and CSS.…

… Redesigned example page and using prettyPrint for code syntax highlighting. Changed icon classes on the buttons
  • Loading branch information...
1 parent 33d7663 commit d79532ffa5391c036ed4149254b6e5be81e3af9e @necolas necolas committed Mar 13, 2011
View
110 stylesheets/css3buttons.css → css/css3-github-buttons.css
@@ -1,5 +1,5 @@
/* ------------------------------------------
-CSS3 BUTTONS (GITHUB STYLE)
+CSS3 GITHUB BUTTONS
Licensed under Unlicense
------------------------------------------ */
@@ -71,17 +71,37 @@ Licensed under Unlicense
content: "";
position: relative;
top: 1px;
- display: inline-block;
+ float:left;
width: 14px;
height: 12px;
margin: 0 0.5em 0 -0.25em;
- background: url(../images/css3buttons_icons.png) no-repeat;
+ background: url(../images/css3-github-buttons-icons.png) 0 99px no-repeat;
}
-.button.book.icon:before { background-position: 0 0; }
-.button.book.icon:hover:before,
-.button.book.icon:focus:before,
-.button.book.icon:active:before { background-position: 0 -15px; }
+.button.arrowup.icon:before { background-position: 0 -824px; }
+.button.arrowup.icon:hover:before,
+.button.arrowup.icon:focus:before,
+.button.arrowup.icon:active:before { background-position: 0 -839px; }
+
+.button.arrowdown.icon:before { background-position: 0 -234px; }
+.button.arrowdown.icon:hover:before,
+.button.arrowdown.icon:focus:before,
+.button.arrowdown.icon:active:before { background-position: 0 -249px; }
+
+.button.arrowright.icon:before { float:right; margin: 0 -0.25em 0 0.5em; background-position: 0 -674px; }
+.button.arrowright.icon:hover:before,
+.button.arrowright.icon:focus:before,
+.button.arrowright.icon:active:before { background-position: 0 -689px; }
+
+.button.arrowleft.icon:before { background-position: 0 -382px; }
+.button.arrowleft.icon:hover:before,
+.button.arrowleft.icon:focus:before,
+.button.arrowleft.icon:active:before { background-position: 0 -397px; }
+
+.button.log.icon:before { background-position: 0 0; }
+.button.log.icon:hover:before,
+.button.log.icon:focus:before,
+.button.log.icon:active:before { background-position: 0 -15px; }
.button.calendar.icon:before { background-position: 0 -30px; }
.button.calendar.icon:hover:before,
@@ -93,45 +113,40 @@ Licensed under Unlicense
.button.chat.icon:focus:before,
.button.chat.icon:active:before { background-position: 0 -75px; }
-.button.check.icon:before { background-position: 0 -90px; }
-.button.check.icon:hover:before,
-.button.check.icon:focus:before,
-.button.check.icon:active:before { background-position: 0 -103px; }
+.button.approve.icon:before { background-position: 0 -90px; }
+.button.approve.icon:hover:before,
+.button.approve.icon:focus:before,
+.button.approve.icon:active:before { background-position: 0 -103px; }
.button.clock.icon:before { background-position: 0 -116px; }
.button.clock.icon:hover:before,
.button.clock.icon:focus:before,
.button.clock.icon:active:before { background-position: 0 -131px; }
-.button.cog.icon:before { background-position: 0 -146px; }
-.button.cog.icon:hover:before,
-.button.cog.icon:focus:before,
-.button.cog.icon:active:before { background-position: 0 -161px; }
+.button.settings.icon:before { background-position: 0 -146px; }
+.button.settings.icon:hover:before,
+.button.settings.icon:focus:before,
+.button.settings.icon:active:before { background-position: 0 -161px; }
.button.comment.icon:before { background-position: 0 -176px; }
.button.comment.icon:hover:before,
.button.comment.icon:focus:before,
.button.comment.icon:active:before { background-position: 0 -190px; }
-.button.cross.icon:before { background-position: 0 -204px; }
-.button.cross.icon:hover:before,
-.button.cross.icon:focus:before,
-.button.cross.icon:active:before { background-position: 0 -219px; }
-
-.button.downarrow.icon:before { background-position: 0 -234px; }
-.button.downarrow.icon:hover:before,
-.button.downarrow.icon:focus:before,
-.button.downarrow.icon:active:before { background-position: 0 -249px; }
+.button.remove.icon:before { background-position: 0 -204px; }
+.button.remove.icon:hover:before,
+.button.remove.icon:focus:before,
+.button.remove.icon:active:before { background-position: 0 -219px; }
.button.fork.icon:before { background-position: 0 -264px; }
.button.fork.icon:hover:before,
.button.fork.icon:focus:before,
.button.fork.icon:active:before { background-position: 0 -279px; }
-.button.heart.icon:before { background-position: 0 -294px; }
-.button.heart.icon:hover:before,
-.button.heart.icon:focus:before,
-.button.heart.icon:active:before { background-position: 0 -308px; }
+.button.like.icon:before { background-position: 0 -294px; }
+.button.like.icon:hover:before,
+.button.like.icon:focus:before,
+.button.like.icon:active:before { background-position: 0 -308px; }
.button.home.icon:before { background-position: 0 -322px; }
.button.home.icon:hover:before,
@@ -143,11 +158,6 @@ Licensed under Unlicense
.button.key.icon:focus:before,
.button.key.icon:active:before { background-position: 0 -367px; }
-.button.leftarrow.icon:before { background-position: 0 -382px; }
-.button.leftarrow.icon:hover:before,
-.button.leftarrow.icon:focus:before,
-.button.leftarrow.icon:active:before { background-position: 0 -397px; }
-
.button.lock.icon:before { background-position: 0 -412px; }
.button.lock.icon:hover:before,
.button.lock.icon:focus:before,
@@ -158,10 +168,10 @@ Licensed under Unlicense
.button.loop.icon:focus:before,
.button.loop.icon:active:before { background-position: 0 -457px; }
-.button.magnifier.icon:before { background-position: 0 -472px; }
-.button.magnifier.icon:hover:before,
-.button.magnifier.icon:focus:before,
-.button.magnifier.icon:active:before { background-position: 0 -487px; }
+.button.search.icon:before { background-position: 0 -472px; }
+.button.search.icon:hover:before,
+.button.search.icon:focus:before,
+.button.search.icon:active:before { background-position: 0 -487px; }
.button.mail.icon:before { background-position: 0 -502px; }
.button.mail.icon:hover:before,
@@ -173,31 +183,26 @@ Licensed under Unlicense
.button.move.icon:focus:before,
.button.move.icon:active:before { background-position: 0 -541px; }
-.button.pen.icon:before { background-position: 0 -556px; }
-.button.pen.icon:hover:before,
-.button.pen.icon:focus:before,
-.button.pen.icon:active:before { background-position: 0 -571px; }
+.button.edit.icon:before { background-position: 0 -556px; }
+.button.edit.icon:hover:before,
+.button.edit.icon:focus:before,
+.button.edit.icon:active:before { background-position: 0 -571px; }
.button.pin.icon:before { background-position: 0 -586px; }
.button.pin.icon:hover:before,
.button.pin.icon:focus:before,
.button.pin.icon:active:before { background-position: 0 -601px; }
-.button.plus.icon:before { background-position: 0 -616px; }
-.button.plus.icon:hover:before,
-.button.plus.icon:focus:before,
-.button.plus.icon:active:before { background-position: 0 -631px; }
+.button.add.icon:before { background-position: 0 -616px; }
+.button.add.icon:hover:before,
+.button.add.icon:focus:before,
+.button.add.icon:active:before { background-position: 0 -631px; }
.button.reload.icon:before { background-position: 0 -646px; }
.button.reload.icon:hover:before,
.button.reload.icon:focus:before,
.button.reload.icon:active:before { background-position: 0 -660px; }
-.button.rightarrow.icon:before { background-position: 0 -674px; }
-.button.rightarrow.icon:hover:before,
-.button.rightarrow.icon:focus:before,
-.button.rightarrow.icon:active:before { background-position: 0 -689px; }
-
.button.rss.icon:before { background-position: 0 -704px; }
.button.rss.icon:hover:before,
.button.rss.icon:focus:before,
@@ -218,11 +223,6 @@ Licensed under Unlicense
.button.unlock.icon:focus:before,
.button.unlock.icon:active:before { background-position: 0 -809px; }
-.button.uparrow.icon:before { background-position: 0 -824px; }
-.button.uparrow.icon:hover:before,
-.button.uparrow.icon:focus:before,
-.button.uparrow.icon:active:before { background-position: 0 -839px; }
-
.button.user.icon:before { background-position: 0 -854px; }
.button.user.icon:hover:before,
.button.user.icon:focus:before,
View
149 css/demo.css
@@ -0,0 +1,149 @@
+/* ------------------------------------------
+CSS3 GITHUB BUTTONS
+Styles for the demo page. Not needed for the buttons.
+------------------------------------------ */
+
+
+/* ------------------------------------------------------------------------------------------------------------- RESET */
+
+html, body, div,
+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;
+}
+
+ul, ol {
+ padding: 0;
+ margin: 20px 0;
+}
+
+code {
+ font-family: monospace, serif;
+}
+
+table {
+ border-collapse: separate;
+ border-spacing: 0;
+ margin: 0;
+ vertical-align: middle;
+}
+
+th {
+ font-weight: bold;
+}
+
+th, td {
+ padding: 5px;
+ text-align: left;
+ vertical-align: middle;
+}
+
+/* ------------------------------------------------------------------------------------------------------------- TEMPLATE */
+
+.container {
+ position:relative;
+ 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;
+}
View
392 demo.html
@@ -1,392 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
- <!--[if IE]><![endif]-->
- <meta charset="utf-8">
- <title>CSS3 Buttons | Simple CSS3 framework for creating button links</title>
- <meta name="description" content="Simple CSS3 framework for creating button links">
- <!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
- <link rel="stylesheet" href="stylesheets/demo.css" media="screen">
- <link rel="stylesheet" href="stylesheets/css3buttons.css" media="screen">
-</head>
-<body>
- <div class="container">
- <header>
- <h1>CSS3 Buttons (Github style)</h1>
- </header>
-
- <div id="main">
- <section class="odd">
- <h2>What is this?</h2>
- <p><a href="http://github.com/michenriksen/css3buttons" title="Go to GitHub repository">CSS3 buttons</a> is a simple <em>framework</em> for creating good-looking GitHub style button links.</p>
- </section>
-
- <section class="even">
- <h2>Buttons</h2>
-
- <div class="example">
- <p>To create a button, the only thing you have to do is this:</p>
- <h3>Code:</h3>
- <pre class="code"><span style='color:#ff8906; '>&lt;</span><span style='color:#e66170; font-weight:bold; '>a</span> href<span style='color:#d2cd86; '>=</span><span style='color:#00c4c4; '>"#"</span> class<span style='color:#d2cd86; '>=</span><span style='color:#00c4c4; '>"button"</span><span style='color:#ff8906; '>></span>This is a Button<span style='color:#ff8906; '>&lt;/</span><span style='color:#e66170; font-weight:bold; '>a</span><span style='color:#ff8906; '>></span></pre>
-
- <h3>Result:</h3>
- <a href="#n" class="button">This is a Button</a>
- </div>
-
- <div class="example">
- <p>If you prefer a pill-like button with more rounded corners, you can add a <code>.pill</code> class to the button</p>
- <h3>Code:</h3>
- <pre class="code"><span style='color:#ff8906; '>&lt;</span><span style='color:#e66170; font-weight:bold; '>a</span> href<span style='color:#d2cd86; '>=</span><span style='color:#00c4c4; '>"#"</span> class<span style='color:#d2cd86; '>=</span><span style='color:#00c4c4; '>"button pill"</span><span style='color:#ff8906; '>></span>This is a Pill Button<span style='color:#ff8906; '>&lt;/</span><span style='color:#e66170; font-weight:bold; '>a</span><span style='color:#ff8906; '>></span></pre>
-
- <h3>Result:</h3>
- <a href="#n" class="button pill">This is a Pill Button</a>
- </div>
-
-
- <div class="example">
- <p>Sometimes when you have multiple buttons, it's considered good practice to highlight the button with the primary action in order to give the user a visual clue of what action to take if in doubt. This can be accomplished by adding a <code>.primary</code> class to the button.</p>
- <h3>Code:</h3>
- <pre class="code"><span style='color:#ff8906; '>&lt;</span><span style='color:#e66170; font-weight:bold; '>a</span> href<span style='color:#d2cd86; '>=</span><span style='color:#00c4c4; '>"#"</span> class<span style='color:#d2cd86; '>=</span><span style='color:#00c4c4; '>"button primary"</span><span style='color:#ff8906; '>></span>Publish Post<span style='color:#ff8906; '>&lt;/</span><span style='color:#e66170; font-weight:bold; '>a</span><span style='color:#ff8906; '>></span> or <span style='color:#ff8906; '>&lt;</span><span style='color:#e66170; font-weight:bold; '>a</span> href<span style='color:#d2cd86; '>=</span><span style='color:#00c4c4; '>"#"</span> class<span style='color:#d2cd86; '>=</span><span style='color:#00c4c4; '>"button"</span><span style='color:#ff8906; '>></span>Save as Draft<span style='color:#ff8906; '>&lt;/</span><span style='color:#e66170; font-weight:bold; '>a</span><span style='color:#ff8906; '>></span></pre>
-
- <h3>Result:</h3>
- <a href="#n" class="button primary">Publish Post</a> or <a href="#n" class="button">Save as Draft</a>
- </div>
- </section>
-
- <section class="odd">
- <h2>Buttons with dangerous actions</h2>
-
- <div class="example">
- <p>If you have a button that triggers a <em>dangerous</em> action, like deleting data, it's good practice to warn the user by styling the button differently than the normal buttons. Give a button the class <code>.danger</code> and the hover-state will change to red.</p>
- <h3>Code:</h3>
- <pre class="code"><span style='color:#ff8906; '>&lt;</span><span style='color:#e66170; font-weight:bold; '>a</span> href<span style='color:#d2cd86; '>=</span><span style='color:#00c4c4; '>"#"</span> class<span style='color:#d2cd86; '>=</span><span style='color:#00c4c4; '>"button danger"</span><span style='color:#ff8906; '>></span>Divide by Zero<span style='color:#ff8906; '>&lt;/</span><span style='color:#e66170; font-weight:bold; '>a</span><span style='color:#ff8906; '>></span></pre>
-
- <h3>Result:</h3>
- <a href="#n" class="button danger">Divide by Zero</a>
- </div>
- </section>
-
- <section class="even">
- <h2>Grouped buttons</h2>
-
- <div class="example">
- <p>You can create grouped buttons that are linked together, as seen at <a href="http://www.gmail.com">Gmail</a> and other places, by wrapping buttons in an element with a <code>.button-group</code> class:</p>
- <h3>Code:</h3>
-<pre class="code"><span style='color:#ff8906; '>&lt;</span><span style='color:#e66170; font-weight:bold; '>div</span> class<span style='color:#d2cd86; '>=</span><span style='color:#00c4c4; '>"button-group"</span>>
- <span style='color:#ff8906; '>&lt;</span><span style='color:#e66170; font-weight:bold; '>a</span> href<span style='color:#d2cd86; '>=</span><span style='color:#00c4c4; '>"#"</span> class<span style='color:#d2cd86; '>=</span><span style='color:#00c4c4; '>"button primary"</span><span style='color:#ff8906; '>></span>Dashboard<span style='color:#ff8906; '>&lt;/</span><span style='color:#e66170; font-weight:bold; '>a</span><span style='color:#ff8906; '>></span>
- <span style='color:#ff8906; '>&lt;</span><span style='color:#e66170; font-weight:bold; '>a</span> href<span style='color:#d2cd86; '>=</span><span style='color:#00c4c4; '>"#"</span> class<span style='color:#d2cd86; '>=</span><span style='color:#00c4c4; '>"button"</span><span style='color:#ff8906; '>></span>Inbox<span style='color:#ff8906; '>&lt;/</span><span style='color:#e66170; font-weight:bold; '>a</span><span style='color:#ff8906; '>></span>
- <span style='color:#ff8906; '>&lt;</span><span style='color:#e66170; font-weight:bold; '>a</span> href<span style='color:#d2cd86; '>=</span><span style='color:#00c4c4; '>"#"</span> class<span style='color:#d2cd86; '>=</span><span style='color:#00c4c4; '>"button"</span><span style='color:#ff8906; '>></span>Account<span style='color:#ff8906; '>&lt;/</span><span style='color:#e66170; font-weight:bold; '>a</span><span style='color:#ff8906; '>></span>
- <span style='color:#ff8906; '>&lt;</span><span style='color:#e66170; font-weight:bold; '>a</span> href<span style='color:#d2cd86; '>=</span><span style='color:#00c4c4; '>"#"</span> class<span style='color:#d2cd86; '>=</span><span style='color:#00c4c4; '>"button"</span><span style='color:#ff8906; '>></span>Logout<span style='color:#ff8906; '>&lt;/</span><span style='color:#e66170; font-weight:bold; '>a</span><span style='color:#ff8906; '>></span>
-<span style='color:#ff8906; '>&lt;/</span><span style='color:#e66170; font-weight:bold; '>div</span><span style='color:#ff8906; '>></span></pre>
-
- <h3>Result:</h3>
- <div class="button-group">
- <a href="#n" class="button primary">Dashboard</a>
- <a href="#n" class="button">Inbox</a>
- <a href="#n" class="button">Account</a>
- <a href="#n" class="button">Logout</a>
- </div>
- </div>
-
- <div class="example">
- <p>This also works if you use an unordered or ordered list with a <code>.button-group</code> class. Each button sits within a list item:</p>
- <h3>Code:</h3>
-<pre class="code"><span style='color:#ff8906; '>&lt;</span><span style='color:#e66170; font-weight:bold; '>ul</span> class<span style='color:#d2cd86; '>=</span><span style='color:#00c4c4; '>"button-group"</span>>
- <span style='color:#ff8906; '>&lt;</span><span style='color:#e66170; font-weight:bold; '>li</span><span style='color:#ff8906; '>></span><span style='color:#ff8906; '>&lt;</span><span style='color:#e66170; font-weight:bold; '>a</span> href<span style='color:#d2cd86; '>=</span><span style='color:#00c4c4; '>"#"</span> class<span style='color:#d2cd86; '>=</span><span style='color:#00c4c4; '>"button primary pill"</span><span style='color:#ff8906; '>></span>Dashboard<span style='color:#ff8906; '>&lt;/</span><span style='color:#e66170; font-weight:bold; '>a</span><span style='color:#ff8906; '>></span><span style='color:#ff8906; '>&lt;/</span><span style='color:#e66170; font-weight:bold; '>li</span><span style='color:#ff8906; '>></span>
- <span style='color:#ff8906; '>&lt;</span><span style='color:#e66170; font-weight:bold; '>li</span><span style='color:#ff8906; '>></span><span style='color:#ff8906; '>&lt;</span><span style='color:#e66170; font-weight:bold; '>a</span> href<span style='color:#d2cd86; '>=</span><span style='color:#00c4c4; '>"#"</span> class<span style='color:#d2cd86; '>=</span><span style='color:#00c4c4; '>"button pill"</span><span style='color:#ff8906; '>></span>Inbox<span style='color:#ff8906; '>&lt;/</span><span style='color:#e66170; font-weight:bold; '>a</span><span style='color:#ff8906; '>></span><span style='color:#ff8906; '>&lt;/</span><span style='color:#e66170; font-weight:bold; '>li</span><span style='color:#ff8906; '>></span>
- <span style='color:#ff8906; '>&lt;</span><span style='color:#e66170; font-weight:bold; '>li</span><span style='color:#ff8906; '>></span><span style='color:#ff8906; '>&lt;</span><span style='color:#e66170; font-weight:bold; '>a</span> href<span style='color:#d2cd86; '>=</span><span style='color:#00c4c4; '>"#"</span> class<span style='color:#d2cd86; '>=</span><span style='color:#00c4c4; '>"button pill"</span><span style='color:#ff8906; '>></span>Account<span style='color:#ff8906; '>&lt;/</span><span style='color:#e66170; font-weight:bold; '>a</span><span style='color:#ff8906; '>></span><span style='color:#ff8906; '>&lt;/</span><span style='color:#e66170; font-weight:bold; '>li</span><span style='color:#ff8906; '>></span>
- <span style='color:#ff8906; '>&lt;</span><span style='color:#e66170; font-weight:bold; '>li</span><span style='color:#ff8906; '>></span><span style='color:#ff8906; '>&lt;</span><span style='color:#e66170; font-weight:bold; '>a</span> href<span style='color:#d2cd86; '>=</span><span style='color:#00c4c4; '>"#"</span> class<span style='color:#d2cd86; '>=</span><span style='color:#00c4c4; '>"button pill"</span><span style='color:#ff8906; '>></span>Logout<span style='color:#ff8906; '>&lt;/</span><span style='color:#e66170; font-weight:bold; '>a</span><span style='color:#ff8906; '>></span><span style='color:#ff8906; '>&lt;/</span><span style='color:#e66170; font-weight:bold; '>li</span><span style='color:#ff8906; '>></span>
-<span style='color:#ff8906; '>&lt;/</span><span style='color:#e66170; font-weight:bold; '>ul</span><span style='color:#ff8906; '>></span></pre>
-
- <h3>Result:</h3>
- <ul class="button-group">
- <li><a href="#n" class="button primary pill">Dashboard</a></li>
- <li><a href="#n" class="button pill">Inbox</a></li>
- <li><a href="#n" class="button pill">Account</a></li>
- <li><a href="#n" class="button pill">Logout</a></li>
- </ul>
- </div>
-
- <div class="example">
- <p>Sets of grouped buttons will sit alongside each other, by default. You can reduce the visual prominence of a group with a <code>.minor-group</code> class:</p>
- <h3>Code:</h3>
-<pre class="code"><span style='color:#ff8906; '>&lt;</span><span style='color:#e66170; font-weight:bold; '>div</span> class<span style='color:#d2cd86; '>=</span><span style='color:#00c4c4; '>"button-group"</span>>
- <span style='color:#ff8906; '>&lt;</span><span style='color:#e66170; font-weight:bold; '>a</span> href<span style='color:#d2cd86; '>=</span><span style='color:#00c4c4; '>"#"</span> class<span style='color:#d2cd86; '>=</span><span style='color:#00c4c4; '>"button primary"</span><span style='color:#ff8906; '>></span>Archive<span style='color:#ff8906; '>&lt;/</span><span style='color:#e66170; font-weight:bold; '>a</span><span style='color:#ff8906; '>></span>
- <span style='color:#ff8906; '>&lt;</span><span style='color:#e66170; font-weight:bold; '>a</span> href<span style='color:#d2cd86; '>=</span><span style='color:#00c4c4; '>"#"</span> class<span style='color:#d2cd86; '>=</span><span style='color:#00c4c4; '>"button"</span><span style='color:#ff8906; '>></span>Report Spam<span style='color:#ff8906; '>&lt;/</span><span style='color:#e66170; font-weight:bold; '>a</span><span style='color:#ff8906; '>></span>
- <span style='color:#ff8906; '>&lt;</span><span style='color:#e66170; font-weight:bold; '>a</span> href<span style='color:#d2cd86; '>=</span><span style='color:#00c4c4; '>"#"</span> class<span style='color:#d2cd86; '>=</span><span style='color:#00c4c4; '>"button"</span><span style='color:#ff8906; '>></span>Delete<span style='color:#ff8906; '>&lt;/</span><span style='color:#e66170; font-weight:bold; '>a</span><span style='color:#ff8906; '>></span>
-<span style='color:#ff8906; '>&lt;/</span><span style='color:#e66170; font-weight:bold; '>div</span><span style='color:#ff8906; '>></span>
-
-<span style='color:#ff8906; '>&lt;</span><span style='color:#e66170; font-weight:bold; '>div</span> class<span style='color:#d2cd86; '>=</span><span style='color:#00c4c4; '>"button-group minor-group"</span>>
- <span style='color:#ff8906; '>&lt;</span><span style='color:#e66170; font-weight:bold; '>a</span> href<span style='color:#d2cd86; '>=</span><span style='color:#00c4c4; '>"#"</span> class<span style='color:#d2cd86; '>=</span><span style='color:#00c4c4; '>"button"</span><span style='color:#ff8906; '>></span>Move to<span style='color:#ff8906; '>&lt;/</span><span style='color:#e66170; font-weight:bold; '>a</span><span style='color:#ff8906; '>></span>
- <span style='color:#ff8906; '>&lt;</span><span style='color:#e66170; font-weight:bold; '>a</span> href<span style='color:#d2cd86; '>=</span><span style='color:#00c4c4; '>"#"</span> class<span style='color:#d2cd86; '>=</span><span style='color:#00c4c4; '>"button"</span><span style='color:#ff8906; '>></span>Labels<span style='color:#ff8906; '>&lt;/</span><span style='color:#e66170; font-weight:bold; '>a</span><span style='color:#ff8906; '>></span>
-<span style='color:#ff8906; '>&lt;/</span><span style='color:#e66170; font-weight:bold; '>div</span><span style='color:#ff8906; '>></span></pre>
-
- <h3>Result:</h3>
- <div class="button-group">
- <a href="#n" class="button primary">Archive</a>
- <a href="#n" class="button">Report Spam</a>
- <a href="#n" class="button danger">Delete</a>
- </div>
-
- <div class="button-group minor-group">
- <a href="#n" class="button">Move to</a>
- <a href="#n" class="button">Labels</a>
- </div>
- </div>
- </section>
-
- <section class="odd">
- <h2>Buttons with icons</h2>
-
- <div class="example">
- <p>CSS3 Buttons supports a wide range of icons that can easily be added to any button by adding a class of <code>.icon</code> and any one of the provided icon classes:</p>
- <h3>Code:</h3>
- <pre class="code"><span style='color:#ff8906; '>&lt;</span><span style='color:#e66170; font-weight:bold; '>a</span> href<span style='color:#d2cd86; '>=</span><span style='color:#00c4c4; '>"#"</span> class<span style='color:#d2cd86; '>=</span><span style='color:#00c4c4; '>"button magnifier icon"</span><span style='color:#ff8906; '>></span>Search<span style='color:#ff8906; '>&lt;/</span><span style='color:#e66170; font-weight:bold; '>a</span><span style='color:#ff8906; '>></span></pre>
-
- <h3>Result:</h3>
- <a href="#n" class="button magnifier icon">Search</a>
- </div>
-
- <div class="example">
- <p>Here is a list of all the supported icon classes:</p>
- <table>
- <thead>
- <tr>
- <th scope="col">Class</th>
- <th scope="col">Example</th>
- </tr>
- </thead>
- <tr>
- <td scope="row"><code>.book</code></td>
- <td><a href="#n" class="button book icon">View Log</a></td>
- </tr>
- <tr>
- <td scope="row"><code>.calendar</code></td>
- <td><a href="#n" class="button calendar icon">Add to Calendar</a></td>
- </tr>
- <tr>
- <td scope="row"><code>.chat</code></td>
- <td><a href="#n" class="button chat icon">Start Chat</a></td>
- </tr>
- <tr>
- <td scope="row"><code>.check</code></td>
- <td><a href="#n" class="button check icon">Approve Registration</a></td>
- </tr>
- <tr>
- <td scope="row"><code>.clock</code></td>
- <td><a href="#n" class="button clock icon">Register Work Time</a></td>
- </tr>
- <tr>
- <td scope="row"><code>.cog</code></td>
- <td><a href="#n" class="button cog icon">Settings</a></td>
- </tr>
- <tr>
- <td scope="row"><code>.comment</code></td>
- <td><a href="#n" class="button comment icon">Add Comment</a></td>
- </tr>
- <tr>
- <td scope="row"><code>.cross</code></td>
- <td><a href="#n" class="danger button cross icon">Remove Item</a></td>
- </tr>
- <tr>
- <td scope="row"><code>.downarrow</code></td>
- <td><a href="#n" class="button downarrow icon">Move Down</a></td>
- </tr>
- <tr>
- <td scope="row"><code>.fork</code></td>
- <td><a href="#n" class="button fork icon">Create Branch</a></td>
- </tr>
- <tr>
- <td scope="row"><code>.heart</code></td>
- <td><a href="#n" class="button heart icon">Add to Favorites</a></td>
- </tr>
- <tr>
- <td scope="row"><code>.home</code></td>
- <td><a href="#n" class="button home icon">Back to Frontpage</a></td>
- </tr>
- <tr>
- <td scope="row"><code>.key</code></td>
- <td><a href="#n" class="button key icon">Password Protect</a></td>
- </tr>
- <tr>
- <td scope="row"><code>.leftarrow</code></td>
- <td><a href="#n" class="button leftarrow icon">Move Left</a></td>
- </tr>
- <tr>
- <td scope="row"><code>.lock</code></td>
- <td><a href="#n" class="button lock icon">Lock Article</a></td>
- </tr>
- <tr>
- <td scope="row"><code>.loop</code></td>
- <td><a href="#n" class="button loop icon">Resend Message</a></td>
- </tr>
- <tr>
- <td scope="row"><code>.magnifier</code></td>
- <td><a href="#n" class="button magnifier icon">Search</a></td>
- </tr>
- <tr>
- <td scope="row"><code>.mail</code></td>
- <td><a href="#n" class="button mail icon">Send Newsletter</a></td>
- </tr>
- <tr>
- <td scope="row"><code>.move</code></td>
- <td><a href="#n" class="button move icon">Move</a></td>
- </tr>
- <tr>
- <td scope="row"><code>.pen</code></td>
- <td><a href="#n" class="button pen icon">Edit Post</a></td>
- </tr>
- <tr>
- <td scope="row"><code>.pin</code></td>
- <td><a href="#n" class="button pin icon">Pin to Map</a></td>
- </tr>
- <tr>
- <td scope="row"><code>.plus</code></td>
- <td><a href="#n" class="button plus icon">Add Post</a></td>
- </tr>
- <tr>
- <td scope="row"><code>.reload</code></td>
- <td><a href="#n" class="button reload icon">Reload Page</a></td>
- </tr>
- <tr>
- <td scope="row"><code>.rightarrow</code></td>
- <td><a href="#n" class="button rightarrow icon">Move Right</a></td>
- </tr>
- <tr>
- <td scope="row"><code>.rss</code></td>
- <td><a href="#n" class="button rss icon">Subscribe to RSS Feed</a></td>
- </tr>
- <tr>
- <td scope="row"><code>.tag</code></td>
- <td><a href="#n" class="button tag icon">Add Tag</a></td>
- </tr>
- <tr>
- <td scope="row"><code>.trash</code></td>
- <td><a href="#n" class="danger button trash icon">Delete Post</a></td>
- </tr>
- <tr>
- <td scope="row"><code>.unlock</code></td>
- <td><a href="#n" class="button unlock icon">Unlock Article</a></td>
- </tr>
- <tr>
- <td scope="row"><code>.uparrow</code></td>
- <td><a href="#n" class="button uparrow icon">Move Up</a></td>
- </tr>
- <tr>
- <td scope="row"><code>.user</code></td>
- <td><a href="#n" class="button user icon">Add New User</a></td>
- </tr>
- </table>
- </div>
- </section>
-
- <section class="even">
- <h2>Big buttons</h2>
- <div class="example">
- <p>If you wish to emphasize a specific action you can add the <code>.big</code> class to make a more prominent <em>call-to-action</em> button:</p>
- <h3>Code:</h3>
- <pre class="code"><span style='color:#ff8906; '>&lt;</span><span style='color:#e66170; font-weight:bold; '>a</span> href<span style='color:#d2cd86; '>=</span><span style='color:#00c4c4; '>"#"</span> class<span style='color:#d2cd86; '>=</span><span style='color:#00c4c4; '>"big button"</span><span style='color:#ff8906; '>></span>Create Project<span style='color:#ff8906; '>&lt;/</span><span style='color:#e66170; font-weight:bold; '>a</span><span style='color:#ff8906; '>></span></pre>
-
- <h3>Result:</h3>
- <a href="#n" class="big button">Create Project</a>
- </div>
- </section>
-
- <section class="odd">
- <h2>Browser compatibility</h2>
- <p>CSS3 Buttons works in all major browsers</p>
- <p class="notice"><strong>Note:</strong> Some CSS3 features used in CSS3 Buttons is not supported in Internet Explorer browsers! (IE 8 and under).</p>
- </section>
-
- <section class="even">
- <h2>Installation</h2>
-
- <ol>
- <li>Drop <code>css3buttons.css</code> in your stylesheets folder</li>
- <li>Drop <code>css3buttons_icons.png</code> in your images folder</li>
- <li>Link to <code>css3buttons.css</code> in the head section of your HTML page (<em>see code example below</em>)</li>
- </ol>
-
- <div class="example">
- <h3>Code:</h3>
- <pre class="code"><span style='color:#ff8906; '>&lt;</span><span style='color:#e66170; font-weight:bold; '>link</span> rel<span style='color:#d2cd86; '>=</span><span style='color:#00c4c4; '>"stylesheet"</span> href<span style='color:#d2cd86; '>=</span><span style='color:#00c4c4; '>"stylesheets/css3buttons.css"</span> media<span style='color:#d2cd86; '>=</span><span style='color:#00c4c4; '>"screen"</span><span style='color:#ff8906; '>></span></pre>
- </div>
-
- <p class="notice">CSS3 Buttons expects that some kind of CSS reset is in place in your project, otherwise the look might not be, as seen here.
- </p>
- </section>
-
- <section class="odd">
- <h2>License</h2>
- <h3>The <a href="http://unlicense.org/">Unlicense</a>:</h3>
-
- <blockquote>
- <p>
- This is free and unencumbered software released into the public domain.
- </p>
-
- <p>
- Anyone is free to copy, modify, publish, use, compile, sell, or
- distribute this software, either in source code form or as a compiled
- binary, for any purpose, commercial or non-commercial, and by any
- means.
- </p>
-
- <p>
- In jurisdictions that recognize copyright laws, the author or authors
- of this software dedicate any and all copyright interest in the
- software to the public domain. We make this dedication for the benefit
- of the public at large and to the detriment of our heirs and
- successors. We intend this dedication to be an overt act of
- relinquishment in perpetuity of all present and future rights to this
- software under copyright law.
- </p>
-
- <p>
- THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
- EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
- MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
- IN NO EVENT SHALL THE AUTHORS BE LIABLE FOR ANY CLAIM, DAMAGES OR
- OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE,
- ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
- OTHER DEALINGS IN THE SOFTWARE.
- </p>
-
- <p>
- For more information, please refer to &lt;<a href="http://unlicense.org/">http://unlicense.org/</a>&gt;
- </p>
- </blockquote>
- </section>
-
- <section class="even">
- <h2>Shout-Outs</h2>
-
- <ul>
- <li>Thanks to <a href="http://github.com">GitHub</a> and <a href="http://davidwalsh.name/github-css">David Walsh</a> for inspiration!</li>
- <li>Icons used in CSS3 Buttons are from the excellent <a href="http://somerandomdude.com/projects/iconic/">Iconic pack</a> by <a href="http://somerandomdude.com/">some random dude</a>!</li>
- </ul>
- </section>
-
- <section class="odd">
- <h2>Contact</h2>
-
- <h3>Found a Bug?</h3>
- <p>
- Please create a <a href="https://github.com/michenriksen/css3buttons/issues" target="_blank">ticket on GitHub</a> With a description of the problem, browser and operating system information and how to reproduce the problem.
- </p>
-
- <h3>Need Help?</h3>
- <p>
- You can send me a private message on <a href="http://github.com/michenriksen/" target="_blank">GitHub</a> and I'll do my best to help you.
- </p>
- </section>
- </div>
-
- <footer>
- <a href="http://github.com/michenriksen/css3buttons">CSS3 Buttons</a> was created by <a href="http://michaelhenriksen.dk" title="Website of Michael Henriksen">Michael Henriksen</a> and heavily modified by <a href="http://nicolasgallagher.com" title="Website of Nicolas Gallagher">Nicolas Gallagher</a>.
- </footer>
- </div>
-
- <a href="http://github.com/michenriksen" target="_blank" title="Michael Henriksen on GitHub"><img class="ribbon" src="http://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" alt="Fork me on GitHub" /></a>
-</body>
-</html>
View
0 images/css3buttons_icons.png → images/css3-github-buttons-icons.png
File renamed without changes
View
321 index.html
@@ -0,0 +1,321 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <title>CSS3 Github Buttons</title>
+ <meta name="description" content="">
+ <link rel="stylesheet" href="css/demo.css" media="screen">
+ <link rel="stylesheet" href="css/css3-github-buttons.css" media="screen">
+
+ <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">&lt;a href="#" class="button">Post comment&lt;/a></pre>
+ <form>
+ <a href="#n" 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="#n" 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="#n" class="button primary">Publish post</a> <a href="#n" 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="#n" 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 <code>.big</code> class to make a more prominent <em>call-to-action</em> button:</p>
+
+ <div class="example">
+ <pre class="prettyprint"><code>&lt;a href="#" class="button big">Create Project&lt;/a></code></pre>
+ <a href="#n" 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="#n" class="button primary">Dashboard</a>
+ <a href="#n" class="button">Inbox</a>
+ <a href="#n" class="button">Account</a>
+ <a href="#n" 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="#n" class="button primary pill">Dashboard</a></li>
+ <li><a href="#n" class="button pill">Inbox</a></li>
+ <li><a href="#n" class="button pill">Account</a></li>
+ <li><a href="#n" 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="#n" class="button primary">Dashboard</a>
+ <a href="#n" class="button">Inbox</a>
+ <a href="#n" class="button">Account</a>
+ <a href="#n" 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="#n" class="button primary">Compose new</a>
+
+ <div class="button-group">
+ <a href="#n" class="button primary">Archive</a>
+ <a href="#n" class="button">Report spam</a>
+ <a href="#n" class="button danger">Delete</a>
+ </div>
+
+ <div class="button-group minor-group">
+ <a href="#n" class="button">Move to</a>
+ <a href="#n" 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="#n" 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="#n" class="button icon arrowup">Move up</a></td>
+ </tr>
+ <tr>
+ <td scope="row"><code>.arrowdown</code></td>
+ <td><a href="#n" class="button icon arrowdown">Move down</a></td>
+ </tr>
+ <tr>
+ <td scope="row"><code>.arrowleft</code></td>
+ <td><a href="#n" class="button icon arrowleft">Move left</a></td>
+ </tr>
+ <tr>
+ <td scope="row"><code>.arrowright</code></td>
+ <td><a href="#n" class="button icon arrowright">Move right</a></td>
+ </tr>
+ <tr>
+ <td scope="row"><code>.log</code></td>
+ <td><a href="#n" class="button icon log">View log</a></td>
+ </tr>
+ <tr>
+ <td scope="row"><code>.calendar</code></td>
+ <td><a href="#n" class="button icon calendar">Add to calendar</a></td>
+ </tr>
+ <tr>
+ <td scope="row"><code>.chat</code></td>
+ <td><a href="#n" class="button icon chat">Start chat</a></td>
+ </tr>
+ <tr>
+ <td scope="row"><code>.approve</code></td>
+ <td><a href="#n" class="button icon approve">Approve registration</a></td>
+ </tr>
+ <tr>
+ <td scope="row"><code>.clock</code></td>
+ <td><a href="#n" class="button icon clock">Start timer</a></td>
+ </tr>
+ <tr>
+ <td scope="row"><code>.settings</code></td>
+ <td><a href="#n" class="button icon settings">Settings</a></td>
+ </tr>
+ <tr>
+ <td scope="row"><code>.comment</code></td>
+ <td><a href="#n" class="button icon comment">Add comment</a></td>
+ </tr>
+ <tr>
+ <td scope="row"><code>.remove</code></td>
+ <td><a href="#n" class="button danger icon remove">Remove item</a></td>
+ </tr>
+ <tr>
+ <td scope="row"><code>.fork</code></td>
+ <td><a href="#n" class="button icon fork">Fork</a></td>
+ </tr>
+ <tr>
+ <td scope="row"><code>.like</code></td>
+ <td><a href="#n" class="button icon like">Like</a></td>
+ </tr>
+ <tr>
+ <td scope="row"><code>.home</code></td>
+ <td><a href="#n" class="button icon home">Back to homepage</a></td>
+ </tr>
+ <tr>
+ <td scope="row"><code>.key</code></td>
+ <td><a href="#n" class="button icon key">Password protect</a></td>
+ </tr>
+ <tr>
+ <td scope="row"><code>.lock</code></td>
+ <td><a href="#n" class="button icon lock">Lock</a></td>
+ </tr>
+ <tr>
+ <td scope="row"><code>.loop</code></td>
+ <td><a href="#n" class="button icon loop">Resend message</a></td>
+ </tr>
+ <tr>
+ <td scope="row"><code>.search</code></td>
+ <td><a href="#n" class="button icon search">Search</a></td>
+ </tr>
+ <tr>
+ <td scope="row"><code>.mail</code></td>
+ <td><a href="#n" class="button icon mail">Send email</a></td>
+ </tr>
+ <tr>
+ <td scope="row"><code>.move</code></td>
+ <td><a href="#n" class="button icon move">Move</a></td>
+ </tr>
+ <tr>
+ <td scope="row"><code>.edit</code></td>
+ <td><a href="#n" class="button icon edit">Edit post</a></td>
+ </tr>
+ <tr>
+ <td scope="row"><code>.pin</code></td>
+ <td><a href="#n" class="button icon pin">Pin to Map</a></td>
+ </tr>
+ <tr>
+ <td scope="row"><code>.add</code></td>
+ <td><a href="#n" class="button icon add">Add post</a></td>
+ </tr>
+ <tr>
+ <td scope="row"><code>.reload</code></td>
+ <td><a href="#n" class="button icon reload">Reload page</a></td>
+ </tr>
+ <tr>
+ <td scope="row"><code>.rss</code></td>
+ <td><a href="#n" class="button icon rss">Subscribe to RSS feed</a></td>
+ </tr>
+ <tr>
+ <td scope="row"><code>.tag</code></td>
+ <td><a href="#n" class="button icon tag">Add tag</a></td>
+ </tr>
+ <tr>
+ <td scope="row"><code>.trash</code></td>
+ <td><a href="#n" class="button danger icon trash">Delete post</a></td>
+ </tr>
+ <tr>
+ <td scope="row"><code>.unlock</code></td>
+ <td><a href="#n" class="button icon unlock">Unlock</a></td>
+ </tr>
+ <tr>
+ <td scope="row"><code>.user</code></td>
+ <td><a href="#n" 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>Installation</h2>
+ <ol>
+ <li>Add <code>css3buttons.css</code> in your stylesheets folder</li>
+ <li>Add <code>css3buttons_icons.png</code> in your images folder</li>
+ <li>Link to <code>css3buttons.css</code> in the head of your HTML document.</li>
+ </ol>
+ </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>
View
54 stylesheets/demo.css
@@ -1,54 +0,0 @@
-/**
- * This is styling for the demo page and is not necessary to include in your projects
- */
-
- /* --------------------------------------------------------------
- * Basic reset
--------------------------------------------------------------- */
-
-html, body, div,
-h1, h2, h3, p, span,
-code, pre {
- margin: 0;
- padding: 0;
- border: 0;
- vertical-align: baseline;
-}
-
-article, aside, figure, footer, header, hgroup, nav, section { display: block; }
-a img { border: none; }
-
- /* --------------------------------------------------------------
- * Demo page styles
--------------------------------------------------------------- */
-
-body { font: 14px/1.5 sans-serif; color: #444; background-color: #fff;}
-h1 { font-size: 37px; margin-bottom: 50px; font-weight:normal; color: #666;}
-h2 { font-size: 21px; margin-bottom: 20px; font-weight:normal;}
-h3 { font-size: 16px; margin-bottom: 10px; font-weight:normal;}
-p { margin-bottom: 20px }
-
-a { color: #980905 }
-a:hover, a:focus, a:active {text-decoration:none;}
-
-em { font-style: italic }
-ul, ol { padding-left: 30px; margin: 20px 0; }
-
-table { border-collapse: separate; border-spacing: 0; vertical-align: middle; margin: 20px auto 20px auto }
-th { font-weight: bold }
-th, td { padding: 5px; text-align: left; vertical-align: middle; }
-blockquote { margin: 20px 0px 20px 0px }
-
-.code, blockquote, code { font-family: Consolas, Menlo, Monaco, 'Lucida Console', 'Liberation Mono', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Courier New', monospace, serif }
-.code { color: #d1d1d1; background-color: #3F3F3F; margin: 0px 0px 20px 0px; padding: 5px; font-size: 13px; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; }
-.notice { background-color: #FFF9D8; margin-top: 20px; padding: 10px; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; }
-.ribbon { position: absolute; top: 0; right: 0; border: 0; }
-
-.container { margin: 50px auto 100px auto; width: 750px; }
-#main { padding: 10px; background-color: #FFFFFF; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; }
-
-section { margin-bottom: 20px; padding: 10px; }
-section.even { -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; }
-div.example { margin: 10px 0px 20px 0px; padding: 10px 0px 10px 0px; border-top: 1px dotted #ccc; }
-footer { font-size: 11px; color: #666; text-align: center; margin-top: 20px; }
-footer a { color: #666 }

0 comments on commit d79532f

Please sign in to comment.