CSS3 Facebook Style Buttons

Last modified on by Karthikeyan K

Creating Facebook style Buttons using simple CSS & CSS3


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

CSS3 Facebook Buttons

CSS3 Facebook Buttons

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>

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

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>
Facebook Style Buttons With Icons

Facebook Style Buttons With Icons

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.

Source – Link

[button type=”download” url=”https://www.box.com/s/ndq9957tyson8qdolf8k” color=”orange” align=”after”]Download[/button]

You May Also Like

Leave a Reply

Your email address will not be published. Required fields are marked *