CSS3 Facebook Buttons

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.

<a class="uibutton" href="#">Button</a>
<button class="uibutton" type="submit">Button</button>
<input class="uibutton" type="submit" value="Button">

Larger buttons

To create larger buttons inclue an additional class of large.

<a class="uibutton large" href="#">Search</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.

<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>

Dashboard Inbox Account Logout

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 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:

<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

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.