Một số button với icon bằng CSS3

Hôm nay mình sẽ giới thiệu một vài button có gắn icon nhưng đặc biệt là những icon này không phải là hình ảnh mà là ký tự đặc biệt vì thế bạn hoàn toàn không phải lo lắng gì về tốc độ load của blog và cũng vì thế nên bạn cũng dễ dàng thay đổi màu sắc cho các icon này. Những button này được thiết kế bởi Red-Team-Design.com và bạn hãy xem demo bên dưới để biết chi tiết hơn. Để thêm những button này bạn hãy làm theo hướng dẫn bên dưới

Add Edit  Delete Save  Emaillike Next Star spark play

Thêm CSS vào template

Bước 1: Vào blogger → Mẫu → Chỉnh sửa HTML
Bước 2: Chèn code bên dưới vào trước thẻ ]]></b:skin> rồi lưu tedmplate lại

.button
{    
 display: inline-block;
 white-space: nowrap;
 background-color: #ccc;
 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);
 filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#eeeeee', EndColorStr='#cccccc');
 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: #ddd;    
 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);
 filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#fafafa', EndColorStr='#dddddd');    
}
.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;    
}
/* Hexadecimal entities for the icons */
.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";
}

Chèn button vào bài viết

Viết bài ở chế độ HTML và sử dụng những code tương ứng

<a class="button add" href="Your URL Here!">Add</a>
<a class="button edit" href="Your URL Here!">Edit</a>
<a class="button delete" href="Your URL Here!">Delete</a>
<a class="button save" href="Your URL Here!">Save</a>
<a class="button email" href="Your URL Here!">Email</a>
<a class="button like" href="Your URL Here!">like</a>
<a class="button next" href="Your URL Here!">Next</a>
<a class="button star" href="Your URL Here!">Star</a>
<a class="button spark" href="Your URL Here!">spark</a>
<a class="button play" href="Your URL Here!">play</a>