Một số button với icon bằng css cho blog/website

Ơ bài viết này mình sẽ giới thiệu bộ button với icon tương ứng và 3 button của các mạng xã hội Facebook, Twitter và G+. Mời bạn xem các button demo bằng hình ảnh bên dưới hoặc click vào link sau để xem demo trực tiếp

CSS

Code:

.
	
button {
display:inline-block;
white-space:nowrap;
background-color:#ddd;
background-image:-webkit-gradient(linear,left top,left bottom,from(#eee),to(#ccc));
background-image:-webkit-linear-gradient(top,#eee,#ccc);
background-image:-moz-linear-gradient(top,#eee,#ccc);
background-image:-ms-linear-gradient(top,#eee,#ccc);
background-image:-o-linear-gradient(top,#eee,#ccc);
background-image:linear-gradient(top,#eee,#ccc);
border:1px solid #777;
padding:0 1.5em;
margin:0.5em;
font:bold 1em/2em Arial,Helvetica;
text-decoration:none;
color:#333;
text-shadow:0 1px 0 rgba(255,255,255,.8);
-moz-border-radius:.2em;
-webkit-border-radius:.2em;
border-radius:.2em;
-moz-box-shadow:0 0 1px 1px rgba(255,255,255,.8) inset,0 1px 0 rgba(0,0,0,.3);
-webkit-box-shadow:0 0 1px 1px rgba(255,255,255,.8) inset,0 1px 0 rgba(0,0,0,.3);
box-shadow:0 0 1px 1px rgba(255,255,255,.8) inset,0 1px 0 rgba(0,0,0,.3);
}
.
	
button:hover {
background-color:#eee;
background-image:-webkit-gradient(linear,left top,left bottom,from(#fafafa),to(#ddd));
background-image:-webkit-linear-gradient(top,#fafafa,#ddd);
background-image:-moz-linear-gradient(top,#fafafa,#ddd);
background-image:-ms-linear-gradient(top,#fafafa,#ddd);
background-image:-o-linear-gradient(top,#fafafa,#ddd);
background-image:linear-gradient(top,#fafafa,#ddd);
}
.
	
button:active {
-moz-box-shadow:0 0 4px 2px rgba(0,0,0,.3) inset;
-webkit-box-shadow:0 0 4px 2px rgba(0,0,0,.3) inset;
box-shadow:0 0 4px 2px rgba(0,0,0,.3) inset;
position:relative;
top:1px;
}
.
	
button:focus {
outline:0;
background:#fafafa;
}
.
	
button:before {
background:#ccc;
background:rgba(0,0,0,.1);
float:left;
width:1em;
text-align:center;
font-size:1.5em;
margin:0 1em 0 -1em;
padding:0 .2em;
-moz-box-shadow:1px 0 0 rgba(0,0,0,.5),2px 0 0 rgba(255,255,255,.5);
-webkit-box-shadow:1px 0 0 rgba(0,0,0,.5),2px 0 0 rgba(255,255,255,.5);
box-shadow:1px 0 0 rgba(0,0,0,.5),2px 0 0 rgba(255,255,255,.5);
-moz-border-radius:.15em 0 0 .15em;
-webkit-border-radius:.15em 0 0 .15em;
border-radius:.15em 0 0 .15em;
pointer-events:none;
}

	
button.
	
button,input.
	
button {
cursor:pointer;
overflow:visible;
}

	
button::-moz-focus-inner {
border:0;
padding:0;
}
input::-moz-focus-inner {padding:.4em;} .
	
button[disabled],.
	
button[disabled]:hover,.
	
button.disabled,.
	
button.disabled:hover {
background:#eee;
color:#aaa;
border-color:#aaa;
cursor:default;
text-shadow:none;
position:static;
-moz-box-shadow:none;
-webkit-box-shadow:none;
box-shadow:none;
}
.add:before {content:"\271A";}
.edit:before {content:"\270E";}
.delete:before {content:"\2718";}
.save:before {content:"\2714";}
.email:before {content:"\2709";}
.like:before {content:"\2764";}
.next:before {content:"\279C";}
.star:before {content:"\2605";}
.spark:before {content:"\2737";}
.play:before {content:"\25B6";}
 
/* 
	
Button Facebook & Twitter */
 
.tw,.fb,.gl,.tw:hover,.fb:hover,.gl:hover {
background-image:-webkit-gradient(linear,left top,left bottom,from(rgba(255,255,255,.5)),to(rgba(255,255,255,0)));
background-image:-webkit-linear-gradient(top,rgba(255,255,255,.5),rgba(255,255,255,0));
background-image:-moz-linear-gradient(top,rgba(255,255,255,.5),rgba(255,255,255,0));
background-image:-ms-linear-gradient(top,rgba(255,255,255,.5),rgba(255,255,255,0));
background-image:-o-linear-gradient(top,rgba(255,255,255,.5),rgba(255,255,255,0));
background-image:linear-gradient(top,rgba(255,255,255,.5),rgba(255,255,255,0));
}
.tw,.tw:focus {background-color:#88E1E6;}
.fb,.fb:focus {
background-color:#3C5A98;
color:#fff;
text-shadow:0 1px 0 rgba(0,0,0,.4);
}
.gl,.gl:focus {
background-color:#ff8000;
color:#fff;
text-shadow:0 1px 0 rgba(0,0,0,.4);
}
.tw:hover {background-color:#b1f0f3;}
.fb:hover {background-color:#879bc3;}
.gl:hover {background-color:#ff5000;}
.tw:before {
content:"t";
background:#91cfd3;
background:rgba(0,0,0,.1);
color:#fff;
font-family:verdana;
text-shadow:0 1px 0 rgba(0,0,0,.4);
}
.fb:before {
content:"f";
background:#4467ac;
background:rgba(0,0,0,.1);
color:#fff;
text-shadow:0 1px 0 rgba(0,0,0,.4);
}
.gl:before {
content:"G";
background:#ff6000;
background:rgba(0,0,0,.1);
color:#fff;
text-shadow:0 1px 0 rgba(0,0,0,.4);
}

HTML

Code:

<a href="" class="
	
button add">Add</a>
<a href="" class="
	
button edit">Edit</a>
<a href="" class="
	
button delete">Delete</a>
<a href="" class="
	
button save">Save</a>
<a href="" class="
	
button email">Send email</a>
<a href="" class="
	
button like">Like</a>
<a href="" class="
	
button next">Next</a>
<a href="" class="
	
button star">Favourite</a>
<a href="" class="
	
button spark">Spark</a>
<a href="" class="
	
button play">Play</a>

HTML cho các button mạng xã hội

Code:

<a href="http://twitter.com/Your-Twitter" class="
	
button tw">Follow me</a>
<a href="http://www.facebook.com/Your-Facebook" class="
	
button fb">Become a fan</a>
<a href="https://plus.google.com/Your-profil-G+" class="
	
button gl">Add me google +</a>