圆角渐变颜色按钮样式

<style>

.button {  color:#fff;  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);

 background: #f78d1d;/*第一行的background  是一个备用，针对不支持CSS3 的浏览器,*/  

background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));/*第二行的background是为 Webkit这类浏览器,*/  

background: -moz-linear-gradient(top,  #faa51a,  #f47a20);/*第三行的background是为Firefox*/  

filter:progid: DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');/*filter只被Internet Explorer识别*/ }

.button:hover {  text-decoration: none;  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');}

.button:active {  position: relative;  top: 1px;  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'); }

</style>