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>
Change picture Log in Request an invitation 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>
Search Share Request an invitation 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>
New message 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.