Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Optimized icon sprite and implemented additional icons

  • Loading branch information...
commit e54c989e308315eb1e0eec1a2a77c0d1d2005d07 1 parent a998290
michenriksen authored
View
21 README.md
@@ -2,7 +2,7 @@
## What is this? ##
-[CSS3 buttons](http://css3buttons.michaelhenriksen.dk) is a simple *framework* to create good-looking GitHub style button links.
+[CSS3 buttons](http://css3buttons.michaelhenriksen.dk) is a simple *framework* for creating good-looking GitHub style button links.
## Buttons ##
@@ -24,7 +24,7 @@ a `.primary` class to the button
If you have a button that triggers a negative 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 `.negative` and the
-hover-state will change from blue to red
+hover-state will change to red
<a href="#" class="negative button">Divide by Zero</a>
@@ -47,29 +47,40 @@ You can also add the pill class to grouped buttons if preferred:
CSS3 Buttons supports a wide range of icons that can easily be added to any button by adding a span tag inside the anchor
tag with the class of `.icon` and any one of the provided icon classes:
-
+)
<a href="#" class="button"><span class="magnifier icon"></span>Search</a>
Here is a list of all the supported icon classes:
+ * `.book`
* `.calendar`
* `.chat`
* `.check`
+ * `.clock`
* `.cog`
* `.comment`
* `.cross`
+ * `.downarrow`
+ * `.fork`
* `.heart`
* `.home`
* `.key`
+ * `.leftarrow`
+ * `.lock`
* `.loop`
* `.magnifier`
* `.mail`
+ * `.move`
* `.pen`
+ * `.pin`
* `.plus`
* `.reload`
+ * `.rightarrow`
* `.rss`
* `.tag`
* `.trash`
+ * `.unlock`
+ * `.uparrow`
* `.user`
## Big buttons ##
@@ -82,7 +93,7 @@ If you wish to emphasize a specific action you can add the `.big` class to make
CSS3 Buttons works in all major browsers
-**Note:** Some CSS3 features used in CSS3 Buttons is not supported in Internet Explorer browsers!
+**Note:** Some CSS3 features used in CSS3 Buttons is not supported in Internet Explorer browsers! (IE 8 and under)
## Installation ##
@@ -115,4 +126,4 @@ For more information, please refer to <http://unlicense.org/>
Please create a [ticket on GitHub](https://github.com/michenriksen/css3buttons/issues) With a description of the problem, browser and operating system information and how to reproduce the problem.
### Need Help? ###
-You can send me a private message on [GitHub](http://github.com/michenriksen/) and I'll do my best to help you.
+You can send me a private message on [GitHub](http://github.com/michenriksen/) and I'll do my best to help you.
View
52 demo.html
@@ -21,7 +21,7 @@ <h1 id="title">CSS3 Buttons</h1>
<p>
<a href="http://github.com/michenriksen/css3buttons" title="Go to GitHub repository">CSS3 buttons</a> is a simple <em>framework</em>
- to create good-looking GitHub style button links.
+ for creating good-looking GitHub style button links.
</p>
</section>
@@ -78,7 +78,7 @@ <h1 id="title">CSS3 Buttons</h1>
<p>
If you have a button that triggers a <em>negative</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>.negative</code> and the hover-state
- will change from blue to red
+ will change to red
</p>
<article class="example">
@@ -155,6 +155,10 @@ <h1 id="title">CSS3 Buttons</h1>
<th>Example</th>
</tr>
</thead>
+ <tr>
+ <td><code>.book</code></td>
+ <td><a href="javascript:void(false)" class="button"><span class="book icon"></span>View Log</a></td>
+ </tr>
<tr>
<td><code>.calendar</code></td>
<td><a href="javascript:void(false)" class="button"><span class="calendar icon"></span>Add to Calendar</a></td>
@@ -167,6 +171,10 @@ <h1 id="title">CSS3 Buttons</h1>
<td><code>.check</code></td>
<td><a href="javascript:void(false)" class="button"><span class="check icon"></span>Approve Registration</a></td>
</tr>
+ <tr>
+ <td><code>.clock</code></td>
+ <td><a href="javascript:void(false)" class="button"><span class="clock icon"></span>Register Work Time</a></td>
+ </tr>
<tr>
<td><code>.cog</code></td>
<td><a href="javascript:void(false)" class="button"><span class="cog icon"></span>Settings</a></td>
@@ -179,6 +187,14 @@ <h1 id="title">CSS3 Buttons</h1>
<td><code>.cross</code></td>
<td><a href="javascript:void(false)" class="negative button"><span class="cross icon"></span>Remove Item</a></td>
</tr>
+ <tr>
+ <td><code>.downarrow</code></td>
+ <td><a href="javascript:void(false)" class="button"><span class="downarrow icon"></span>Move Down</a></td>
+ </tr>
+ <tr>
+ <td><code>.fork</code></td>
+ <td><a href="javascript:void(false)" class="button"><span class="fork icon"></span>Create Branch</a></td>
+ </tr>
<tr>
<td><code>.heart</code></td>
<td><a href="javascript:void(false)" class="button"><span class="heart icon"></span>Add to Favorites</a></td>
@@ -191,6 +207,14 @@ <h1 id="title">CSS3 Buttons</h1>
<td><code>.key</code></td>
<td><a href="javascript:void(false)" class="button"><span class="key icon"></span>Password Protect</a></td>
</tr>
+ <tr>
+ <td><code>.leftarrow</code></td>
+ <td><a href="javascript:void(false)" class="button"><span class="leftarrow icon"></span>Move Left</a></td>
+ </tr>
+ <tr>
+ <td><code>.lock</code></td>
+ <td><a href="javascript:void(false)" class="button"><span class="lock icon"></span>Lock Article</a></td>
+ </tr>
<tr>
<td><code>.loop</code></td>
<td><a href="javascript:void(false)" class="button"><span class="loop icon"></span>Resend Message</a></td>
@@ -203,10 +227,18 @@ <h1 id="title">CSS3 Buttons</h1>
<td><code>.mail</code></td>
<td><a href="javascript:void(false)" class="button"><span class="mail icon"></span>Send Newsletter</a></td>
</tr>
+ <tr>
+ <td><code>.move</code></td>
+ <td><a href="javascript:void(false)" class="button"><span class="move icon"></span>Move</a></td>
+ </tr>
<tr>
<td><code>.pen</code></td>
<td><a href="javascript:void(false)" class="button"><span class="pen icon"></span>Edit Post</a></td>
</tr>
+ <tr>
+ <td><code>.pin</code></td>
+ <td><a href="javascript:void(false)" class="button"><span class="pin icon"></span>Pin to Map</a></td>
+ </tr>
<tr>
<td><code>.plus</code></td>
<td><a href="javascript:void(false)" class="button"><span class="plus icon"></span>Add Post</a></td>
@@ -215,6 +247,10 @@ <h1 id="title">CSS3 Buttons</h1>
<td><code>.reload</code></td>
<td><a href="javascript:void(false)" class="button"><span class="reload icon"></span>Reload Page</a></td>
</tr>
+ <tr>
+ <td><code>.rightarrow</code></td>
+ <td><a href="javascript:void(false)" class="button"><span class="rightarrow icon"></span>Move Right</a></td>
+ </tr>
<tr>
<td><code>.rss</code></td>
<td><a href="javascript:void(false)" class="button"><span class="rss icon"></span>Subscribe to RSS Feed</a></td>
@@ -227,6 +263,14 @@ <h1 id="title">CSS3 Buttons</h1>
<td><code>.trash</code></td>
<td><a href="javascript:void(false)" class="negative button"><span class="trash icon"></span>Delete Post</a></td>
</tr>
+ <tr>
+ <td><code>.unlock</code></td>
+ <td><a href="javascript:void(false)" class="button"><span class="unlock icon"></span>Unlock Article</a></td>
+ </tr>
+ <tr>
+ <td><code>.uparrow</code></td>
+ <td><a href="javascript:void(false)" class="button"><span class="uparrow icon"></span>Move Up</a></td>
+ </tr>
<tr>
<td><code>.user</code></td>
<td><a href="javascript:void(false)" class="button"><span class="user icon"></span>Add New User</a></td>
@@ -262,7 +306,7 @@ <h1 id="title">CSS3 Buttons</h1>
</p>
<p class="notice">
- <strong>Note:</strong> Some CSS3 features used in CSS3 Buttons is not supported in Internet Explorer browsers!
+ <strong>Note:</strong> Some CSS3 features used in CSS3 Buttons is not supported in Internet Explorer browsers! (IE 8 and under)
</p>
</section>
@@ -360,4 +404,4 @@ <h1 id="title">CSS3 Buttons</h1>
<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>
+</html>
View
BIN  images/css3buttons_icons.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
102 stylesheets/css3buttons.css
@@ -17,45 +17,63 @@ a.button.right:active { top: 0px }
a.button.big { font-size: 16px; padding-left: 17px; padding-right: 17px; }
a.button span.icon { display: inline-block; width: 14px; height: 12px; margin: auto 7px auto auto; position: relative; top: 2px; background-image: url('../images/css3buttons_icons.png'); background-repeat: no-repeat; }
a.big.button span.icon { top: 0px }
-a.button span.icon.magnifier { background-position: -1px 0px }
-a.button:hover span.icon.magnifier { background-position: -17px 0px }
-a.button span.icon.mail { background-position: -37px 0px }
-a.button:hover span.icon.mail { background-position: -55px 0px }
-a.button span.icon.loop { background-position: -74px 0px }
-a.button:hover span.icon.loop { background-position: -89px 0px }
-a.button span.icon.reload { background-position: -105px 0px }
-a.button:hover span.icon.reload { background-position: -124px 0px }
-a.button span.icon.calendar { background-position: -144px 0px }
-a.button:hover span.icon.calendar { background-position: -163px 0px }
-a.button span.icon.rss { background-position: -182px 0px }
-a.button:hover span.icon.rss { background-position: -200px 0px }
-a.button span.icon.chat { background-position: -220px 0px }
-a.button:hover span.icon.chat { background-position: -240px 0px }
-a.button span.icon.pen { background-position: -259px 0px }
-a.button:hover span.icon.pen { background-position: -277px 0px }
-a.button span.icon.key { background-position: -298px 0px }
-a.button:hover span.icon.key { background-position: -315px 0px }
-a.button span.icon.cog { background-position: -336px 0px }
-a.button:hover span.icon.cog { background-position: -354px 0px }
-a.button span.icon.user { background-position: -372px 0px }
-a.button:hover span.icon.user { background-position: -388px 0px }
-a.button span.icon.trash { background-position: 1px -19px }
-a.button:hover span.icon.trash { background-position: -17px -19px }
-a.button span.icon.lock { background-position: -38px -19px }
-a.button:hover span.icon.lock { background-position: -55px -19px }
-a.button span.icon.unlock { background-position: -74px -19px }
-a.button:hover span.icon.unlock { background-position: -90px -19px }
-a.button span.icon.comment { background-position: -107px -19px }
-a.button:hover span.icon.comment { background-position: -124px -19px }
-a.button span.icon.plus { background-position: -145px -19px }
-a.button:hover span.icon.plus { background-position: -164px -19px }
-a.button span.icon.cross { background-position: -183px -19px }
-a.button:hover span.icon.cross { background-position: -201px -19px }
-a.button span.icon.check { background-position: -243px -19px }
-a.button:hover span.icon.check { background-position: -223px -19px }
-a.button span.icon.tag { background-position: -262px -19px }
-a.button:hover span.icon.tag { background-position: -279px -20px }
-a.button span.icon.heart { background-position: -296px -19px }
-a.button:hover span.icon.heart { background-position: -315px -19px }
-a.button span.icon.home { background-position: -337px -19px }
-a.button:hover span.icon.home { background-position: -356px -19px }
+a.button span.icon.book { background-position: 0 0 }
+a.button:hover span.icon.book { background-position: 0 -15px }
+a.button span.icon.calendar { background-position: 0 -30px }
+a.button:hover span.icon.calendar { background-position: 0 -45px }
+a.button span.icon.chat { background-position: 0 -60px }
+a.button:hover span.icon.chat { background-position: 0 -75px }
+a.button span.icon.check { background-position: 0 -90px }
+a.button:hover span.icon.check { background-position: 0 -103px }
+a.button span.icon.clock { background-position: 0 -116px }
+a.button:hover span.icon.clock { background-position: 0 -131px }
+a.button span.icon.cog { background-position: 0 -146px }
+a.button:hover span.icon.cog { background-position: 0 -161px }
+a.button span.icon.comment { background-position: 0 -176px }
+a.button:hover span.icon.comment { background-position: 0 -190px }
+a.button span.icon.cross { background-position: 0 -204px }
+a.button:hover span.icon.cross { background-position: 0 -219px }
+a.button span.icon.downarrow { background-position: 0 -234px }
+a.button:hover span.icon.downarrow { background-position: 0 -249px }
+a.button span.icon.fork { background-position: 0 -264px }
+a.button:hover span.icon.fork { background-position: 0 -279px }
+a.button span.icon.heart { background-position: 0 -294px }
+a.button:hover span.icon.heart { background-position: 0 -308px }
+a.button span.icon.home { background-position: 0 -322px }
+a.button:hover span.icon.home { background-position: 0 -337px }
+a.button span.icon.key { background-position: 0 -352px }
+a.button:hover span.icon.key { background-position: 0 -367px }
+a.button span.icon.leftarrow { background-position: 0 -382px }
+a.button:hover span.icon.leftarrow { background-position: 0 -397px }
+a.button span.icon.lock { background-position: 0 -412px }
+a.button:hover span.icon.lock { background-position: 0 -427px }
+a.button span.icon.loop { background-position: 0 -442px }
+a.button:hover span.icon.loop { background-position: 0 -457px }
+a.button span.icon.magnifier { background-position: 0 -472px }
+a.button:hover span.icon.magnifier { background-position: 0 -487px }
+a.button span.icon.mail { background-position: 0 -502px }
+a.button:hover span.icon.mail { background-position: 0 -514px }
+a.button span.icon.move { background-position: 0 -526px }
+a.button:hover span.icon.move { background-position: 0 -541px }
+a.button span.icon.pen { background-position: 0 -556px }
+a.button:hover span.icon.pen { background-position: 0 -571px }
+a.button span.icon.pin { background-position: 0 -586px }
+a.button:hover span.icon.pin { background-position: 0 -601px }
+a.button span.icon.plus { background-position: 0 -616px }
+a.button:hover span.icon.plus { background-position: 0 -631px }
+a.button span.icon.reload { background-position: 0 -646px }
+a.button:hover span.icon.reload { background-position: 0 -660px }
+a.button span.icon.rightarrow { background-position: 0 -674px }
+a.button:hover span.icon.rightarrow { background-position: 0 -689px }
+a.button span.icon.rss { background-position: 0 -704px }
+a.button:hover span.icon.rss { background-position: 0 -719px }
+a.button span.icon.tag { background-position: 0 -734px }
+a.button:hover span.icon.tag { background-position: 0 -749px }
+a.button span.icon.trash { background-position: 0 -764px }
+a.button:hover span.icon.trash { background-position: 0 -779px }
+a.button span.icon.unlock { background-position: 0 -794px }
+a.button:hover span.icon.unlock { background-position: 0 -809px }
+a.button span.icon.uparrow { background-position: 0 -824px }
+a.button:hover span.icon.uparrow { background-position: 0 -839px }
+a.button span.icon.user { background-position: 0 -854px }
+a.button:hover span.icon.user { background-position: 0 -869px }
Please sign in to comment.
Something went wrong with that request. Please try again.