-
Notifications
You must be signed in to change notification settings - Fork 109
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
1 changed file
with
64 additions
and
47 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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. |