By: Prem Tiwari | Last Updated: | In: Facebook, Web Technologies
In this article i explain the easiest way to make a facebook style Buttons that people think: “Wow, this app must be as good as Facebook!”.
Buttons
To create the default “button” add a class of uibutton to any appropriate element.
|
1 2 3 4 |
<a class="uibutton" href="#">Button</a> <button class="uibutton" type="submit">Button</button> <input class="uibutton" type="submit" value="Button"> <a class="uibutton large" href="#">Search</a> |
Grouped buttons
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<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
Browser compatibility
Full support: Firefox 3.5+, Google Chrome, Safari 4+, IE 9+, Opera 11.10+.
Prem Tiwari is the founder of FreeWebMentor.com and also a professional developer who has vast experience in PHP and open source technologies. Apart from this, he is a blogger by hobby and also he has been a regular speaker of WordPress sessions in various IT Companies. View all posts by Prem Tiwari
