The easiest way to make people think: "Wow, this app must be as good as Facebook!".
To create the default "button" add a class of uibutton
to any appropriate element. To create the blue variant include an 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">
To create larger buttons inclue an additional class of large
.
To created grouped buttons wrap them in an element, or use a list, given the class uibutton-group
.
<div class="uibutton-group">
<a class="uibutton" href="#">Dashboard</a>
<a class="uibutton" href="#">Inbox</a>
<a class="uibutton" href="#">Account</a>
<a class="uibutton" href="#">Logout</a>
</div>
<ul class="uibutton-group">
<li><a class="uibutton" href="#">Dashboard</a></li>
<li><a class="uibutton" href="#">Inbox</a></li>
<li><a class="uibutton" href="#">Account</a></li>
<li><a class="uibutton" href="#">Logout</a></li>
</ul>
To display a toolbar of buttons and grouped buttons, use a wrapping element given the class uibutton-toolbar
.
<div class="uibutton-toolbar">
<a class="uibutton" href="#">Mark as unread</a>
<div class="uibutton-group">
<a class="uibutton" href="#">Report spam</a>
<a class="uibutton" href="#">Delete</a>
</div>
<a class="uibutton" href="#">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:
<a class="uibutton icon add" href="#">New message</a>
New message
Class | Example |
---|---|
.edit |
Edit post |
.add |
Add a photo |
.secure |
Private account |
.prev |
Back to messages |
.next |
Get more info |
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.