Permalink
Browse files

Tidy up README

  • Loading branch information...
1 parent 6018c27 commit e4650d4810635a8b403fdc4e3b9b865ac9d6452b @necolas committed May 21, 2013
Showing with 64 additions and 47 deletions.
  1. +64 −47 README.md
View
111 README.md
@@ -1,65 +1,82 @@
-# CSS3 Facebook-style Buttons #
+# CSS3 Facebook-style Buttons
-Example: [nicolasgallagher.com/lab/css3-facebook-buttons/](http://nicolasgallagher.com/lab/css3-facebook-buttons/)
+Facebook-style buttons and button groups. Default and large sizes.
-## 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`.
+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">
+```html
+<a class="uibutton" href="#">Button</a>
+<button class="uibutton" type="submit">Button</button>
+<input class="uibutton" type="submit" value="Button">
+```
-## Larger buttons ##
+## Larger buttons
To create larger buttons include an additional class of `large`
- <a class="uibutton large" href="#button">Search</a>
-
-## Grouped buttons ##
+```html
+<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`.
+
+```html
+<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`.
+
+```html
+<div class="uibutton-toolbar">
+ <a href="#button" class="uibutton">Mark as unread</a>
-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>
+ <a href="#button" class="uibutton">Report spam</a>
+ <a href="#button" class="uibutton">Delete</a>
</div>
-## Buttons with icons ##
+ <a href="#button" class="uibutton">Unsubscribe</a>
+</div>
+```
-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.
+## Buttons with icons
- <a href="#" class="button icon add">New message</a>
+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.
-## Browser compatibility ##
+```html
+<a href="#" class="button icon add">New message</a>
+```
-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.
+## Browser support
-## License ##
+* Firefox 3.5+
+* Google Chrome
+* Safari 4+
+* IE 6+
+* Opera 11.10+
-Public domain: [http://unlicense.org](http://unlicense.org)
+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.

0 comments on commit e4650d4

Please sign in to comment.