Một số button với icon bằng css [Update]

Nguồn: Satoh Yasuko - NASS Và ở bài viết này mình sẽ giới thiệu bộ button cũ với 3 button mới của các mạng xã hội Facebook, Twitter và G+. Mời bạn xem các button demo bên dưới

CSS

.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

<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

<a href="http://ift.tt/1lT9EPO" class="button tw">Follow me</a>
<a href="http://ift.tt/1cbWNA0" class="button fb">Become a fan</a>
<a href="http://ift.tt/1lT9EPS" class="button gl">Add me google +</a>

Đăng ký: Viet Blogs

Nguồn tin