Creating Facebook style Buttons using simple CSS & CSS3

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

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

If you enjoyed this article, Get email updates (It’s Free)
http://w3lessons.info/wp-content/uploads/2012/12/CSS3-Facebook-Buttons2.pnghttp://w3lessons.info/wp-content/uploads/2012/12/CSS3-Facebook-Buttons2-150x150.pngKarthikeyan KCSS3facebookCSS3,facebook,freebies
Creating Facebook style Buttons using simple CSS & CSS3 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 classspecial.Grouped buttons To created grouped buttons wrap them in an element, or use...