圆角渐变颜色按钮样式

<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>

来源：https://www.cnblogs.com/weiqian/p/3457627.html

标签

background