Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Newer
Older
100644 83 lines (60 sloc) 2.181 kb
e4650d4 @necolas Tidy up README
authored
1 # CSS3 Facebook-style Buttons
fd95f95 @necolas Initial commit
authored
2
e4650d4 @necolas Tidy up README
authored
3 Facebook-style buttons and button groups. Default and large sizes.
fd95f95 @necolas Initial commit
authored
4
e4650d4 @necolas Tidy up README
authored
5 ## Buttons
fd95f95 @necolas Initial commit
authored
6
e4650d4 @necolas Tidy up README
authored
7 To create the default "button" add a class of `uibutton` to any appropriate
8 element. To create the blue variant include the additional class `confirm`. To
9 create the green variant include an additional class `special`.
fd95f95 @necolas Initial commit
authored
10
e4650d4 @necolas Tidy up README
authored
11 ```html
12 <a class="uibutton" href="#">Button</a>
13 <button class="uibutton" type="submit">Button</button>
14 <input class="uibutton" type="submit" value="Button">
15 ```
fd95f95 @necolas Initial commit
authored
16
e4650d4 @necolas Tidy up README
authored
17 ## Larger buttons
fd95f95 @necolas Initial commit
authored
18
19 To create larger buttons include an additional class of `large`
20
e4650d4 @necolas Tidy up README
authored
21 ```html
22 <a class="uibutton large" href="#button">Search</a>
23 ```
24
25 ## Grouped buttons
26
27 To created grouped buttons wrap them in an element, or use a list, given the
28 class `uibutton-group`.
29
30 ```html
31 <div class="uibutton-group">
32 <a href="#button" class="uibutton">Dashboard</a>
33 <a href="#button" class="uibutton">Inbox</a>
34 <a href="#button" class="uibutton">Account</a>
35 <a href="#button" class="uibutton">Logout</a>
36 </div>
37
38 <ul class="uibutton-group">
39 <li><a href="#button" class="uibutton">Dashboard</a></li>
40 <li><a href="#button" class="uibutton">Inbox</a></li>
41 <li><a href="#button" class="uibutton">Account</a></li>
42 <li><a href="#button" class="uibutton">Logout</a></li>
43 </ul>
44 ```
45
46 ## Mixed groups
47
48 To display a toolbar of buttons and grouped buttons, use a wrapping element
49 given the class `uibutton-toolbar`.
50
51 ```html
52 <div class="uibutton-toolbar">
53 <a href="#button" class="uibutton">Mark as unread</a>
fd95f95 @necolas Initial commit
authored
54
55 <div class="uibutton-group">
e4650d4 @necolas Tidy up README
authored
56 <a href="#button" class="uibutton">Report spam</a>
57 <a href="#button" class="uibutton">Delete</a>
fd95f95 @necolas Initial commit
authored
58 </div>
59
e4650d4 @necolas Tidy up README
authored
60 <a href="#button" class="uibutton">Unsubscribe</a>
61 </div>
62 ```
fd95f95 @necolas Initial commit
authored
63
e4650d4 @necolas Tidy up README
authored
64 ## Buttons with icons
fd95f95 @necolas Initial commit
authored
65
e4650d4 @necolas Tidy up README
authored
66 A range of icons can be added (only for links and buttons) by adding a class of
67 `icon` and any one of the provided icon classes.
fd95f95 @necolas Initial commit
authored
68
e4650d4 @necolas Tidy up README
authored
69 ```html
70 <a href="#" class="button icon add">New message</a>
71 ```
fd95f95 @necolas Initial commit
authored
72
e4650d4 @necolas Tidy up README
authored
73 ## Browser support
fd95f95 @necolas Initial commit
authored
74
e4650d4 @necolas Tidy up README
authored
75 * Firefox 3.5+
76 * Google Chrome
77 * Safari 4+
78 * IE 6+
79 * Opera 11.10+
fd95f95 @necolas Initial commit
authored
80
e4650d4 @necolas Tidy up README
authored
81 Note: Some CSS3 enhancements are not supported in older versions of Opera and
82 IE. The use of icons is not supported in IE 6 or IE 7.
Something went wrong with that request. Please try again.