Facebook buttons with CSS

Facebook has a nice collection of buttons those are simple but really nice. Facebook ui like buttons are really awesome.
So how can you include Facebook like CSS buttons into your website or blog?
it is so simple . you have to insert CSS style code to your header section and you can make any button or element with adding a class to that.

Here is a live demo.

Buttons

Buttons Group

Buttons Toolbar

Here is the HTML Code i have used for this demo



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

And here goes the CSS style



<style type='text/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 {

border-color: #777 #777 #666;

}



.uibutton a:hover{

text-decoration:none;

}

.uibutton:active {

border-color: #aaa;

background: #ddd;

filter: none;

-webkit-box-shadow: none;

-moz-box-shadow: none;

box-shadow: none;

}



/* overrides extra padding on button elements in Firefox */

.uibutton::-moz-focus-inner {

padding: 0;

border: 0;

}



/* ............................................................................................................. Icons */



.uibutton.icon:before {

content: "";

position: relative; 

top: 1px; 

float:left;

width: 10px; 

height: 12px; 

margin: 0 0.5em 0 0; 

background: url(fb-icons.png) 99px 99px no-repeat;

}



.uibutton.edit:before  { background-position: 0 0; }

.uibutton.add:before  { background-position: -10px 0; }

.uibutton.secure:before  { background-position: -20px 0; }

.uibutton.prev:before  { background-position: -30px 0; }

.uibutton.next:before  { float:right; margin: 0 -0.25em 0 0.5em; background-position: -40px 0; }



/* ------------------------------------------------------------------------------------------------------------- BUTTON EXTENSIONS */



/* ............................................................................................................. Large */



.uibutton.large {

font-size:13px;

}



/* ............................................................................................................. Submit, etc */



.uibutton.confirm {

border-color: #29447E #29447E #1A356E;

color: #fff;

background-color: #5B74A8;

background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#637bad), to(#5872a7));

background-image: -moz-linear-gradient(#637bad, #5872a7);

background-image: -o-linear-gradient(#637bad, #5872a7);

background-image: linear-gradient(#637bad, #5872a7);

filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#637bad', EndColorStr='#5872a7'); /* for IE 6 - 9 */

-webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 #8a9cc2;

-moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 #8a9cc2;

box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 #8a9cc2;

}



.uibutton.confirm:active {

border-color: #29447E;

background: #4F6AA3;

filter: none;

-webkit-box-shadow: none;

-moz-box-shadow: none;

box-shadow: none;

}



/* ............................................................................................................. Special */



.uibutton.special {

border-color: #3b6e22 #3b6e22 #2c5115;

color: #fff;

background-color: #69A74E;

background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#75ae5c), to(#67a54b));

background-image: -moz-linear-gradient(#75ae5c, #67a54b);

background-image: -o-linear-gradient(#75ae5c, #67a54b);

background-image: linear-gradient(#75ae5c, #67a54b);

filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#75ae5c', EndColorStr='#67a54b'); /* for IE 6 - 9 */

-webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 #98c286;

-moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 #98c286;

box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 #98c286;

}



.uibutton.special:active {

border-color: #3B6E22;

background: #609946;

filter: none;

-webkit-box-shadow: none;

-moz-box-shadow: none;

box-shadow: none;

}





/* ------------------------------------------------------------------------------------------------------------- BUTTON GROUPS */



.uibutton-group {

display: inline-block;

list-style: none;

padding: 0;

margin: 0;

/* IE hacks */

zoom: 1; 

*display: inline; 

}



.uibutton + .uibutton,

.uibutton + .uibutton-group,

.uibutton-group + .uibutton,

.uibutton-group + .uibutton-group {

margin-left: 3px;

}



.uibutton-group li {

float: left;

padding: 0;

margin: 0;

}



.uibutton-group .uibutton {

float: left;

margin-left: -1px; 

}



.uibutton-group .uibutton:hover,

.uibutton-group .uibutton:focus,

.uibutton-group .uibutton:active {

z-index:2;

}



.uibutton-group > .uibutton:first-child,

.uibutton-group li:first-child .uibutton { 

margin-left: 0; 

}



/* ------------------------------------------------------------------------------------------------------------- BUTTON CONTAINER */

/* For mixing buttons and button groups, e.g., in a navigation bar */



.uibutton-toolbar {

padding: 6px;

border-top: 1px solid #ccc;

background: #f2f2f2;

}



.uibutton-toolbar .uibutton,

.uibutton-toolbar .uibutton-group {

vertical-align: bottom;

}

</style>

And here is a demo you can play with :

http://jsfiddle.net/Aslamise/KEbFU/

Hope this helps.
feel free to discuss about this :)

Read Article →

Nice and beautiful paging buttons with CSS

Here is how you can create nice and beautiful paging buttons with css. Below is a live demo.

Here is the souce code and explanations for this stylish paging buttons.

Basic markup code for our paging button goes like this.


<ul id="pagin">
 <li><a class="current" href="#">1</a></li>
 <li><a href="#">2</a></li>
 <li><a href="#">3</a></li>
 <li><a href="#">4</a></li>
 <li><a href="#">next</a></li>
</ul>

And here is the CSS code that makes our paging buttons more beautiful.


<style type='text/css'>
#pagin {
 margin: 65px auto;
 padding: 0;
 list-style: none;
 width: 180px;
}
#pagin li {
 float: left;
 margin-right: 10px;
}
#pagin li a {
 display: block;
 text-decoration: none;
 color: #717171;
 font: bold 11px Arial, sans-serif;
 text-shadow: 0px 1px white;
 padding: 5px 8px;
 -webkit-border-radius: 3px;
 -moz-border-radius: 3px;
 border-radius: 3px;
 -webkit-box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.35);
 -moz-box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.35);
 box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.35);
 background: #f9f9f9;
 background: -webkit-linear-gradient(top, #f9f9f9 0%, #e8e8e8 100%);
 background: -moz-linear-gradient(top, #f9f9f9 0%, #e8e8e8 100%);
 background: -o-linear-gradient(top, #f9f9f9 0%, #e8e8e8 100%);
 background: -ms-linear-gradient(top, #f9f9f9 0%, #e8e8e8 100%);
 background: linear-gradient(top, #f9f9f9 0%, #e8e8e8 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9f9f9', endColorstr='#e8e8e8',GradientType=0 );
}
#pagin li a.current {
 color: white;
 text-shadow: 0px 1px #3f789f;
 -webkit-box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.8);
 -moz-box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.8);
 box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.8);
 background: #7cb9e5;
 background: -webkit-linear-gradient(top, #7cb9e5 0%, #57a1d8 100%);
 background: -moz-linear-gradient(top, #7cb9e5 0%, #57a1d8 100%);
 background: -o-linear-gradient(top, #7cb9e5 0%, #57a1d8 100%);
 background: -ms-linear-gradient(top, #7cb9e5 0%, #57a1d8 100%);
 background: linear-gradient(top, #7cb9e5 0%, #57a1d8 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7cb9e5', endColorstr='#57a1d8',GradientType=0 );
}
#pagin li a:hover {
 -webkit-box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.55);
 -moz-box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.55);
 box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.55);
 background: #fff;
 background: -webkit-linear-gradient(top, #fff 0%, #e8e8e8 100%);
 background: -moz-linear-gradient(top, #fff 0%, #e8e8e8 100%);
 background: -o-linear-gradient(top, #fff 0%, #e8e8e8 100%);
 background: -ms-linear-gradient(top, #fff 0%, #e8e8e8 100%);
 background: linear-gradient(top, #fff 0%, #e8e8e8 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff', endColorstr='#e8e8e8',GradientType=0 );
}
#pagin li a:active,#pagin li a.current:active {
 -webkit-box-shadow: inset 0px 1px 3px 0px rgba(0,0,0,0.5), 0px 1px 1px 0px rgba(255,255,255,1) !important;
 -moz-box-shadow: inset 0px 1px 3px 0px rgba(0,0,0,0.5), 0px 1px 1px 0px rgba(255,255,255,1) !important;
 box-shadow: inset 0px 1px 3px 0px rgba(0,0,0,0.5), 0px 1px 1px 0px rgba(255,255,255,1) !important;
}
#pagin li a.current:hover {
 -webkit-box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.9);
 -moz-box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.9);
 box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.9);
 background: #99cefc;
 background: -webkit-linear-gradient(top, #99cefc 0%, #57a1d8 100%);
 background: -moz-linear-gradient(top, #99cefc 0%, #57a1d8 100%);
 background: -o-linear-gradient(top, #99cefc 0%, #57a1d8 100%);
 background: -ms-linear-gradient(top, #99cefc 0%, #57a1d8 100%);
 background: linear-gradient(top, #99cefc 0%, #57a1d8 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#99cefc', endColorstr='#57a1d8',GradientType=0 );
}
</style>

Read Article →

Bold	[b]text[/b]
Italic	[i]text[/i]
Url	[url]link[/url]
Inline Code	[code]text[/code]
Block Code	[pre]text[/pre]
Image	[img]link[/img]