Tạo bộ Button đẹp bằng CSS3 (P2)

Đăng bởi Admin | 6/8/13 | 0 nhận xét

Hôm nay mình 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

» Bắt đầu thủ thuật

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) >> Chọn Tiếp tục(continue) >> Xem video:

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 
Xem thêm:

Tạo nút button cho blog bằng css

Tạo bộ Button đẹp bằng CSS3 (P3)

Chúc thành công!