Permalink
Browse files

Initial commit

  • Loading branch information...
0 parents commit fd95f954fff12627527f0b20cabe449e1fdd2bbb @necolas committed Apr 15, 2011
Showing with 511 additions and 0 deletions.
  1. +24 −0 LICENSE.txt
  2. +71 −0 README.md
  3. +192 −0 fb-buttons.css
  4. BIN fb-icons.png
  5. BIN fork.png
  6. +224 −0 index.html
24 LICENSE.txt
@@ -0,0 +1,24 @@
+This is free and unencumbered software released into the public domain.
+
+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.
+
+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.
+
+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.
+
+For more information, please refer to <http://unlicense.org/>
71 README.md
@@ -0,0 +1,71 @@
+# CSS3 Facebook-style Buttons #
+
+Example: [nicolasgallagher.com/lab/css3-facebook-buttons/](http://nicolasgallagher.com/lab/css3-facebook-buttons/)
+
+## Buttons ##
+
+To create the default "button" add a class of `uibutton` to any appropriate element. To create the blue variant include the additional class `confirm`. To create the green variant include an additional class `special`.
+
+ <a class="uibutton" href="#">Button</a>
+ <button class="uibutton" type="submit">Button</button>
+ <input class="uibutton" type="submit" value="Button">
+
+## Buttons with dangerous actions ##
+
+If you have a button that triggers a dangerous action, like deleting data, this can be indicated by adding the class `danger`.
+
+ <a href="#" class="button danger">Delete post</a>
+
+## Larger buttons ##
+
+To create larger buttons include an additional class of `large`
+
+ <a class="uibutton large" href="#button">Search</a>
+
+## Grouped buttons ##
+
+To created grouped buttons wrap them in an element, or use a list, given the class 'uibutton-group'.
+
+ <div class="uibutton-group">
+ <a href="#button" class="uibutton">Dashboard</a>
+ <a href="#button" class="uibutton">Inbox</a>
+ <a href="#button" class="uibutton">Account</a>
+ <a href="#button" class="uibutton">Logout</a>
+ </div>
+
+ <ul class="uibutton-group">
+ <li><a href="#button" class="uibutton">Dashboard</a></li>
+ <li><a href="#button" class="uibutton">Inbox</a></li>
+ <li><a href="#button" class="uibutton">Account</a></li>
+ <li><a href="#button" class="uibutton">Logout</a></li>
+ </ul>
+
+## Mixed groups ##
+
+To display a toolbar of buttons and grouped buttons, use a wrapping element given the class `uibutton-toolbar`.
+
+ <div class="uibutton-toolbar">
+ <a href="#button" class="uibutton">Mark as unread</a>
+
+ <div class="uibutton-group">
+ <a href="#button" class="uibutton">Report spam</a>
+ <a href="#button" class="uibutton">Delete</a>
+ </div>
+
+ <a href="#button" class="uibutton">Unsubscribe</a>
+ </div>
+
+## Buttons with icons ##
+
+A range of icons can be added (only for links and buttons) by adding a class of `icon` and any one of the provided icon classes.
+
+ <a href="#" class="button icon add">New message</a>
+
+## Browser compatibility ##
+
+Full support: Firefox 3.5+, Google Chrome, Safari 4+, IE 9+, Opera 11.10+.
+Note: Some CSS3 enhancements are not supported in older versions of Opera and IE. The use of icons is not supported in IE 6 or IE 7.
+
+## License ##
+
+Public domain: [http://unlicense.org](http://unlicense.org)
192 fb-buttons.css
@@ -0,0 +1,192 @@
+/* ------------------------------------------
+CSS3 FACEBOOK-STYLE BUTTONS (Nicolas Gallagher)
+Licensed under Unlicense
+http://github.com/necolas/css3-facebook-buttons
+------------------------------------------ */
+
+
+/* ------------------------------------------------------------------------------------------------------------- BUTTON */
+
+.uibutton {
+ position: relative;
+ z-index: 1;
+ overflow: visible;
+ display: inline-block;
+ padding: 0.3em 0.6em 0.375em;
+ border: 1px solid #999;
+ border-bottom-color: #888;
+ margin: 0;
+ text-decoration: none;
+ text-align: center;
+ font: bold 11px/normal 'lucida grande', tahoma, verdana, arial, sans-serif;
+ white-space: nowrap;
+ cursor: pointer;
+ /* outline: none; */
+ color: #333;
+ background-color: #eee;
+ background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f5f6f6), to(#e4e4e3));
+ background-image: -moz-linear-gradient(#f5f6f6, #e4e4e3);
+ background-image: -o-linear-gradient(#f5f6f6, #e4e4e3);
+ background-image: linear-gradient(#f5f6f6, #e4e4e3);
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f5f6f6', EndColorStr='#e4e4e3'); /* for IE 6 - 9 */
+ -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 #fff;
+ -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 #fff;
+ box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 #fff;
+ /* IE hacks */
+ zoom: 1;
+ *display: inline;
+}
+
+.uibutton:hover,
+.uibutton:focus,
+.uibutton:active {
+ border-color: #777 #777 #666;
+}
+
+.uibutton:active {
+ border-color: #aaa;
+ background: #ddd;
+ filter: none;
+ -webkit-box-shadow: none;
+ -moz-box-shadow: none;
+ box-shadow: none;
+}
+
+/* overrides extra padding on button elements in Firefox */
+.uibutton::-moz-focus-inner {
+ padding: 0;
+ border: 0;
+}
+
+/* ............................................................................................................. Icons */
+
+.uibutton.icon:before {
+ content: "";
+ position: relative;
+ top: 1px;
+ float:left;
+ width: 10px;
+ height: 12px;
+ margin: 0 0.5em 0 0;
+ background: url(fb-icons.png) 99px 99px no-repeat;
+}
+
+.uibutton.edit:before { background-position: 0 0; }
+.uibutton.add:before { background-position: -10px 0; }
+.uibutton.secure:before { background-position: -20px 0; }
+.uibutton.prev:before { background-position: -30px 0; }
+.uibutton.next:before { float:right; margin: 0 -0.25em 0 0.5em; background-position: -40px 0; }
+
+/* ------------------------------------------------------------------------------------------------------------- BUTTON EXTENSIONS */
+
+/* ............................................................................................................. Large */
+
+.uibutton.large {
+ font-size:13px;
+}
+
+/* ............................................................................................................. Submit, etc */
+
+.uibutton.confirm {
+ border-color: #29447E #29447E #1A356E;
+ color: #fff;
+ background-color: #5B74A8;
+ background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#637bad), to(#5872a7));
+ background-image: -moz-linear-gradient(#637bad, #5872a7);
+ background-image: -o-linear-gradient(#637bad, #5872a7);
+ background-image: linear-gradient(#637bad, #5872a7);
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#637bad', EndColorStr='#5872a7'); /* for IE 6 - 9 */
+ -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 #8a9cc2;
+ -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 #8a9cc2;
+ box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 #8a9cc2;
+}
+
+.uibutton.confirm:active {
+ border-color: #29447E;
+ background: #4F6AA3;
+ filter: none;
+ -webkit-box-shadow: none;
+ -moz-box-shadow: none;
+ box-shadow: none;
+}
+
+/* ............................................................................................................. Special */
+
+.uibutton.special {
+ border-color: #3b6e22 #3b6e22 #2c5115;
+ color: #fff;
+ background-color: #69A74E;
+ background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#75ae5c), to(#67a54b));
+ background-image: -moz-linear-gradient(#75ae5c, #67a54b);
+ background-image: -o-linear-gradient(#75ae5c, #67a54b);
+ background-image: linear-gradient(#75ae5c, #67a54b);
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#75ae5c', EndColorStr='#67a54b'); /* for IE 6 - 9 */
+ -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 #98c286;
+ -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 #98c286;
+ box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 #98c286;
+}
+
+.uibutton.special:active {
+ border-color: #3B6E22;
+ background: #609946;
+ filter: none;
+ -webkit-box-shadow: none;
+ -moz-box-shadow: none;
+ box-shadow: none;
+}
+
+
+/* ------------------------------------------------------------------------------------------------------------- BUTTON GROUPS */
+
+.uibutton-group {
+ display: inline-block;
+ list-style: none;
+ padding: 0;
+ margin: 0;
+ /* IE hacks */
+ zoom: 1;
+ *display: inline;
+}
+
+.uibutton + .uibutton,
+.uibutton + .uibutton-group,
+.uibutton-group + .uibutton,
+.uibutton-group + .uibutton-group {
+ margin-left: 3px;
+}
+
+.uibutton-group li {
+ float: left;
+ padding: 0;
+ margin: 0;
+}
+
+.uibutton-group .uibutton {
+ float: left;
+ margin-left: -1px;
+}
+
+.uibutton-group .uibutton:hover,
+.uibutton-group .uibutton:focus,
+.uibutton-group .uibutton:active {
+ z-index:2;
+}
+
+.uibutton-group > .uibutton:first-child,
+.uibutton-group li:first-child .uibutton {
+ margin-left: 0;
+}
+
+/* ------------------------------------------------------------------------------------------------------------- BUTTON CONTAINER */
+/* For mixing buttons and button groups, e.g., in a navigation bar */
+
+.uibutton-toolbar {
+ padding: 6px;
+ border-top: 1px solid #ccc;
+ background: #f2f2f2;
+}
+
+.uibutton-toolbar .uibutton,
+.uibutton-toolbar .uibutton-group {
+ vertical-align: bottom;
+}
BIN fb-icons.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN fork.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
224 index.html
@@ -0,0 +1,224 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <title>CSS3 Facebook Buttons</title>
+ <meta name="description" content="Using CSS3 to create Facebook-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; }
+
+ /* ------------------------------------------------------------------------------------------------------------- BASE */
+
+ html { font-size:100.01; }
+ body { padding: 80px 0 20px; font: 13px/1.333 "lucida grande", tahoma, sans-serif; color: #333; background: #fff;
+ background: -webkit-linear-gradient(#3B5998 40px, #F6F8FA 40px) no-repeat;
+ background: -moz-linear-gradient(#3B5998 40px, #F6F8FA 40px) no-repeat;
+ background: -o-linear-gradient(#3B5998 40px, #F6F8FA 40px) no-repeat;
+ background: linear-gradient(#3B5998 40px, #F6F8FA 40px) no-repeat;
+ -webkit-background-size: 100% 160px;
+ -moz-background-size: 100% 160px;
+ background-size: 100% 160px;
+ }
+
+ a { color: #980905; }
+
+ a:hover,
+ a:focus,
+ a:active { text-decoration: none; }
+
+ h1 { margin: 0 0 0.5em; font-size: 28px; font-weight: normal; }
+ h2 { margin: 0 0 0.75em; font-size: 15px; }
+ 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: 0 auto; background: #fff; }
+
+ .container pre,
+ .container .prettyprint { padding: 0; border: 0; margin: 0 0 20px; 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; }
+ .header p { font-size: 18px; color: #808080; }
+
+ .section { margin: 40px 0 20px; }
+
+ .example { padding: 20px; border: 1px solid #ccc; margin: 10px -20px 20px; }
+ .example p { margin: 15px 0 0; }
+ .example p:first-child { margin: 0; }
+
+ .footer { margin: 20px 0 50px; font-size: 11px; color: #666; text-align: center; }
+ .footer a { color: #666;}
+ </style>
+
+ <link rel="stylesheet" href="fb-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-facebook-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 Facebook Buttons</h1>
+ <p>The easiest way to make people think: "Wow, this app must be as good as Facebook!".</b></p>
+ </div>
+
+ <div class="section">
+ <h2>Buttons</h2>
+ <p>To create the default "button" add a class of <code>uibutton</code> to any appropriate element. To create the blue variant include an additional class <code>confirm</code>. To create the green variant include an additional class <code>special</code>.</p>
+
+ <div class="example">
+ <pre class="prettyprint"><code>&lt;a class="uibutton" href="#">Button&lt;/a>
+&lt;button class="uibutton" type="submit">Button&lt;/button>
+&lt;input class="uibutton" type="submit" value="Button">
+</code></pre>
+ <form>
+ <p><a class="uibutton" href="#button">Change picture</a></p>
+ <p><button class="uibutton confirm" type="submit">Log in</button></p>
+ <p><input class="uibutton confirm" type="submit" value="Publish"> <input class="uibutton" type="submit" value="Save as draft"></p>
+ <p><a class="uibutton special" href="#button">Request an invitation</a></p>
+ </form>
+ </div>
+ </div>
+
+ <div class="section">
+ <h2>Larger buttons</h2>
+ <p>To create larger buttons inclue an additional class of <code>large</code>.</p>
+
+ <div class="example">
+ <pre class="prettyprint"><code>&lt;a class="uibutton large" href="#">Search&lt;/a></code></pre>
+ <p><a class="uibutton large" href="#button">Search</a></p>
+ <p><a class="uibutton large confirm" href="#button">Share</a></p>
+ <p><a class="uibutton large special" href="#button">Request an invitation</a></p>
+ </div>
+ </div>
+
+ <div class="section">
+ <h2>Grouped buttons</h2>
+ <p>To created grouped buttons wrap them in an element, or use a list, given the class <code>uibutton-group</code>.</p>
+
+ <div class="example">
+<pre class="prettyprint"><code>&lt;div class="uibutton-group">
+ &lt;a class="uibutton" href="#">Dashboard&lt;/a>
+ &lt;a class="uibutton" href="#">Inbox&lt;/a>
+ &lt;a class="uibutton" href="#">Account&lt;/a>
+ &lt;a class="uibutton" href="#">Logout&lt;/a>
+&lt;/div>
+
+&lt;ul class="uibutton-group">
+ &lt;li>&lt;a class="uibutton" href="#">Dashboard&lt;/a>&lt;/li>
+ &lt;li>&lt;a class="uibutton" href="#">Inbox&lt;/a>&lt;/li>
+ &lt;li>&lt;a class="uibutton" href="#">Account&lt;/a>&lt;/li>
+ &lt;li>&lt;a class="uibutton" href="#">Logout&lt;/a>&lt;/li>
+&lt;/ul></code></pre>
+ <div class="uibutton-group">
+ <a href="#button" class="uibutton" href="#button">Dashboard</a>
+ <a href="#button" class="uibutton" href="#button">Inbox</a>
+ <a href="#button" class="uibutton" href="#button">Account</a>
+ <a href="#button" class="uibutton" href="#button">Logout</a>
+ </div>
+ </div>
+ </div>
+
+ <div class="section">
+ <h2>Mixed groups</h2>
+ <p>To display a toolbar of buttons and grouped buttons, use a wrapping element given the class <code>uibutton-toolbar</code>.</p>
+
+ <div class="example">
+<pre class="prettyprint"><code>&lt;div class="<b>uibutton-toolbar</b>">
+ &lt;a class="uibutton" href="#">Mark as unread&lt;/a>
+
+ &lt;div class="uibutton-group">
+ &lt;a class="uibutton" href="#">Report spam&lt;/a>
+ &lt;a class="uibutton" href="#">Delete&lt;/a>
+ &lt;/div>
+
+ &lt;a class="uibutton" href="#">Unsubscribe&lt;/a>
+&lt;/div></code></pre>
+ <div class="uibutton-toolbar">
+ <a class="uibutton" href="#button">Mark as unread</a>
+
+ <div class="uibutton-group">
+ <a class="uibutton" href="#button">Report spam</a>
+ <a class="uibutton" href="#button">Delete</a>
+ </div>
+
+ <a class="uibutton" href="#button">Unsubscribe</a>
+ </div>
+ </div>
+ </div>
+
+ <div class="section">
+ <h2>Buttons with icons</h2>
+ <p>A range of icons can be added (only for links and buttons) by adding a class of <code>icon</code> and any one of the provided icon classes:</p>
+
+ <div class="example">
+ <pre class="prettyprint"><code>&lt;a class="uibutton icon add" href="#">New message&lt;/a></code></pre>
+ <a class="uibutton icon add" href="#button">New message</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>.edit</code></td>
+ <td><a class="uibutton icon edit" href="#button">Edit post</a></td>
+ </tr>
+ <tr>
+ <td scope="row"><code>.add</code></td>
+ <td><a class="uibutton icon add" href="#button">Add a photo</a></td>
+ </tr>
+ <tr>
+ <td scope="row"><code>.secure</code></td>
+ <td><a class="uibutton icon secure" href="#button">Private account</a></td>
+ </tr>
+ <tr>
+ <td scope="row"><code>.prev</code></td>
+ <td><a class="uibutton icon prev" href="#button">Back to messages</a></td>
+ </tr>
+ <tr>
+ <td scope="row"><code>.next</code></td>
+ <td><a class="uibutton icon next" href="#button">Get more info</a></td>
+ </tr>
+ </table>
+ </div>
+ </div>
+
+ <div class="section">
+ <h2>Browser compatibility</h2>
+ <p>Full support: Firefox 3.5+, Google Chrome, Safari 4+, IE 9+, Opera 11.10+.</p>
+ <p><strong>Note:</strong> Some CSS3 enhancements are not supported in older versions of Opera and IE. 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>
+
+<div class="footer">
+ <a href="http://github.com/necolas/css3-facebook-buttons">CSS3 Facebook Buttons</a> by <a href="http://nicolasgallagher.com">Nicolas Gallagher</a>.
+</div>
+
+</body>
+</html>

0 comments on commit fd95f95

Please sign in to comment.