Cách tạo Gradient Button với CSS3

Bài viết sau sẽ hướng dẫn các bạn cách tạo nút bấm với hiệu ứng gradient rất đẹp mắt sử dụng CSS3.

Hướng dẫn

1. Tạo style cơ bản cho button

.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;
}

2. Tạo hiệu ứng 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, thêm class "button orange" vào button muốn tạo hiệu ứng

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

Nguồn & Tham khảo

• CSS3 Gradient Buttons

Liên kết

• CSS3 Gradient Buttons Demo

Chọn màu sắc

• ColorSchemer