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+.
If you like FreeWebMentor and you would like to contribute, you can write an article and mail your article to [email protected] Your article will appear on the FreeWebMentor main page and help other developers.
