Buttons
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.
Code
<a class="uibutton" href="#button">Change picture</a>
<button class="uibutton confirm" type="submit">Log in</button>
<input class="uibutton confirm" type="submit" value="Publish">
<input class="uibutton" type="submit" value="Save as druft">
<a class="uibutton special" href="#button">Request an invitation</a>
Larger buttons
To create larger buttons inclue an additional class of large.
Code
<a class="uibutton large" href="#button">Search</a>
<a class="uibutton large confirm" href="#button">Share</a>
<a class="uibutton large special" href="#button">Request an invitation</a>
Grouped buttons
To created grouped buttons wrap them in an element, or use a list, given the class uibutton-group.
Code
<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>
Mixed groups
To display a toolbar of buttons and grouped buttons, use a wrapping element given the class uibutton-toolbar.
Code
<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>
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:
Code
<a class="uibutton icon add" href="#">New message</a>
[p.s.] 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.