#basket
New messages Members Forum rules Search RSS
  • Page 1 of 1
  • 1
Forum » For webmasters » HTML / CSS / Javascript » Facebook Buttons
Facebook Buttons
adminDate: Monday, 20.06.2011, 18:50 | Message # 1
Group: Verified
Posts: 187
Awards: 8
Status: Offline
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.

Code
<a class="uibutton" href="#button">Change picture</a>                       
<button class="uibutton confirm" type="submit">Log in</button>                       
<input class="uibutton confirm" type="submit" value="Publish">                       
<input class="uibutton" type="submit" value="Save as druft">                       
<a class="uibutton special" href="#button">Request an invitation</a>

Change picture

Request an invitation


Larger buttons
To create larger buttons inclue an additional class of large.

Code
<a class="uibutton large" href="#button">Search</a>                       
<a class="uibutton large confirm" href="#button">Share</a>                       
<a class="uibutton large special" href="#button">Request an invitation</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.

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



Mixed groups
To display a toolbar of buttons and grouped buttons, use a wrapping element given the class uibutton-toolbar.

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

Code
<a class="uibutton icon add" href="#">New message</a>

New message


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.


Attachments: facebook-button.zip (2.0 Kb)
 
SirDarknight(Tonmoy)Date: Tuesday, 21.06.2011, 12:27 | Message # 2
Group: Verified
Posts: 167
Awards: 6
Status: Offline
Thank You For Creating This Forum

Please Give Me A Reputation or Award If My Post Helps You
 
SezyDate: Wednesday, 22.06.2011, 06:23 | Message # 3
Group: Verified
Posts: 8
Awards: 1
Status: Offline
Awesome buttons! cool
 
AnimorphDate: Thursday, 30.06.2011, 14:40 | Message # 4
Group: Verified
Posts: 7
Awards: 0
Status: Offline
This is really great , the facebook buttons are plain and simple but still great. , Thankyou for the post smile
 
Forum » For webmasters » HTML / CSS / Javascript » Facebook Buttons
  • Page 1 of 1
  • 1
Search: