Facebook buttons

Facebook buttons. Read full article on http://aslamise.blogspot.com

by Aslamise

HTML

<h1>Buttons</h1>
<button class='uibutton'>button</button>
<button class='uibutton large'>button large</button>
<br/>
<br/>
<button class='uibutton confirm'>confirm button</button>
<button class='uibutton confirm large'>confirm button large</button>
<br/>
<br/>
<button class='uibutton special'>special button</button>
<button class='uibutton special large'>special button large</button>
<br/>
<br/>
<h1>Buttons Group</h1>
<div class='uibutton-group'>
<button class='uibutton'>button</button>
<button class='uibutton confirm'>button</button>
<button class='uibutton special'>button</button>
</div>
<br/>
<br/>
<h1>Buttons Toolbar</h1>
<div class='uibutton-toolbar'>
<button class='uibutton'>button</button>
<button class='uibutton'>button</button>
</div>

CSS

.uibutton { 
    position: relative; 
    z-index: 1;
    overflow: visible; 
    display: inline-block; 
    padding: 0.3em 0.6em 0.375em; 
    border: 1px solid #999; 
    border-bottom-color: #888;
    margin: 0;
    text-decoration: none; 
    text-align: center;
    font: bold 11px/normal 'lucida grande', tahoma, verdana, arial, sans-serif; 
    white-space: nowrap; 
    cursor: pointer; 
    /* outline: none; */
    color: #333; 
    background-color: #eee;
	background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f5f6f6), to(#e4e4e3));
    background-image: -moz-linear-gradient(#f5f6f6, #e4e4e3);
    background-image: -o-linear-gradient(#f5f6f6, #e4e4e3);
    background-image: linear-gradient(#f5f6f6, #e4e4e3);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f5f6f6', EndColorStr='#e4e4e3'); /* for IE 6 - 9 */
    -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 #fff;
    -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 #fff;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 #fff;
	/* IE hacks */
    zoom: 1; 
    *display: inline; 
}

.uiButton{cursor:pointer;display:inline-block;font-size:11px;font-weight:bold;line-height:13px;padding:2px 6px;text-align:center;text-decoration:none;vertical-align:top;white-space:nowrap}
.uiButton, .uiButtonSuppressed:active, .uiButtonSuppressed:focus, .uiButtonSuppressed:hover{background-image:url(//m-static.ak.fbcdn.net/rsrc.php/v2/ys/x/t0WxoMd7EqC.png);background-repeat:no-repeat;background-size:auto;background-position:-352px -401px;background-color:#eee;border:1px solid #999;border-bottom-color:#888;-webkit-box-shadow:0 1px 0 rgba(0, 0, 0, .1)}
.uiButton + .uiButton{margin-left:4px}
.uiButton:hover{text-decoration:none}
.uiButton:active, .uiButtonDepressed{background:#ddd;border-bottom-color:#999;-webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, .2)}
.uiButton .img{margin-top:2px;vertical-align:top}

.uibutton:hover,
.uibutton:focus,
.uibutton:active {
   ...