Tạo bộ Button đẹp bằng CSS3 Phần 2

Hôm nay namkna tiếp tục giới thiệu cho các bạn thêm cách tạo Button bằng CSS3 với hiệu ứng gradient rất đẹp mắt. Nếu muốn luwauj chọn các mẫu đẹp khác xem tại đây

» Hướng dẫn tạo bộ Gradient Button với CSS3 cho Blogspot

1. Đăng nhập (login) vào tài khoản Blogger

2. Vào phần Mẫu (Template)

3. Chọn Chỉnh sửa HTML (Edit HTML)

4. Bạn chọn một trong số mẫu bên dưới và chèn vào trước thẻ  ]]></b:skin>

/* style co ban*/
.button {
display: inline-block;
outline: none;
cursor: pointer;
text-align: center;
text-decoration: none;
font: 14px/100% Arial, Helvetica, sans-serif;
padding: .5em 2em .55em;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
-webkit-border-radius: .5em;
-moz-border-radius: .5em;
border-radius: .5em;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.button:hover {
text-decoration: none;
}
.button:active {
position: relative;
top: 1px;
}
/* hieu ung gradient*/
.orange {
color: #fef4e9;
border: solid 1px #da7c0c;
background: #f78d1d;
background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));
background: -moz-linear-gradient(top, #faa51a, #f47a20);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');
}
.orange:hover {
background: #f47c20;
background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015));
background: -moz-linear-gradient(top, #f88e11, #f06015);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015');
}
.orange:active {
color: #fcd3a5;
background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a));
background: -moz-linear-gradient(top, #f47a20, #faa51a);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a');
}

3. Để sử dụng, Bạn chỉ cần thêm class "button orange" vào button muốn tạo hiệu ứng :

<a href="#" class="button orange">Button</a>

Trong đó: Thay dấu thăng # bằng liên kết
Xem thêm nhiều mẫu khác Tại Đây
-Chúc thành công!