CSS 纯CSS3按钮

Posted 2021-05-23

.button{cursor:pointer;display:inline-block;font:14px/100% Arial,Helvetica,sans-serif;outline:none;padding:.5em 2em .55em;text-align:center;text-decoration:none;text-shadow:0 1px 1px rgba(0,0,0,.3);-webkit-border-radius:.5em;-moz-border-radius:.5em;border-radius:.5em;-moz-background-clip:padding;-webkit-background-clip:padding-box;background-clip:padding-box;-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;}

.bigrounded{-webkit-border-radius:2em;-moz-border-radius:2em;border-radius:2em;-moz-background-clip:padding;-webkit-background-clip:padding-box;background-clip:padding-box;}
.medium{font-size:12px;padding:.4em 1.5em .42em;}
.small{font-size:11px;padding:.2em 1em .275em;}

.black{background:#333;background:-webkit-gradient(linear,left top,left bottom,from(#666),to(#000));background:-moz-linear-gradient(top,#666,#000);border:solid 1px #333;color:#d7d7d7;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#666666',endColorstr='#000000');}
.black:hover{background:#000;background:-webkit-gradient(linear,left top,left bottom,from(#444),to(#000));background:-moz-linear-gradient(top,#444,#000);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444',endColorstr='#000000');}
.black:active{background:-webkit-gradient(linear,left top,left bottom,from(#000),to(#444));background:-moz-linear-gradient(top,#000,#444);color:#666;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000',endColorstr='#666666');}

.blue{background:#0095cd;background:-webkit-gradient(linear,left top,left bottom,from(#00adee),to(#0078a5));background:-moz-linear-gradient(top,#00adee,#0078a5);border:solid 1px #0076a3;color:#d9eef7;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#00adee',endColorstr='#0078a5');}
.blue:hover{background:#007ead;background:-webkit-gradient(linear,left top,left bottom,from(#0095cc),to(#00678e));background:-moz-linear-gradient(top,#0095cc,#00678e);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0095cc',endColorstr='#00678e');}
.blue:active{background:-webkit-gradient(linear,left top,left bottom,from(#0078a5),to(#00adee));background:-moz-linear-gradient(top,#0078a5,#00adee);color:#80bed6;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0078a5',endColorstr='#00adee');}

.gray{background:#6e6e6e;background:-webkit-gradient(linear,left top,left bottom,from(#888),to(#575757));background:-moz-linear-gradient(top,#888,#575757);border:solid 1px #555;color:#e9e9e9;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#888888',endColorstr='#575757');}
.gray:hover{background:#616161;background:-webkit-gradient(linear,left top,left bottom,from(#757575),to(#4b4b4b));background:-moz-linear-gradient(top,#757575,#4b4b4b);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#757575',endColorstr='#4b4b4b');}
.gray:active{background:-webkit-gradient(linear,left top,left bottom,from(#575757),to(#888));background:-moz-linear-gradient(top,#575757,#888);color:#afafaf;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#575757',endColorstr='#888888');}

.green{background:#64991e;background:-webkit-gradient(linear,left top,left bottom,from(#7db72f),to(#4e7d0e));background:-moz-linear-gradient(top,#7db72f,#4e7d0e);border:solid 1px #538312;color:#e8f0de;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#7db72f',endColorstr='#4e7d0e');}
.green:hover{background:#538018;background:-webkit-gradient(linear,left top,left bottom,from(#6b9d28),to(#436b0c));background:-moz-linear-gradient(top,#6b9d28,#436b0c);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#6b9d28',endColorstr='#436b0c');}
.green:active{background:-webkit-gradient(linear,left top,left bottom,from(#4e7d0e),to(#7db72f));background:-moz-linear-gradient(top,#4e7d0e,#7db72f);color:#a9c08c;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#4e7d0e',endColorstr='#7db72f');}

.orange{background:#f78d1d;background:-webkit-gradient(linear,left top,left bottom,from(#faa51a),to(#f47a20));background:-moz-linear-gradient(top,#faa51a,#f47a20);border:solid 1px #da7c0c;color:#fef4e9;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{background:-webkit-gradient(linear,left top,left bottom,from(#f47a20),to(#faa51a));background:-moz-linear-gradient(top,#f47a20,#faa51a);color:#fcd3a5;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20',endColorstr='#faa51a');}

.pink{background:#f895c2;background:-webkit-gradient(linear,left top,left bottom,from(#feb1d3),to(#f171ab));background:-moz-linear-gradient(top,#feb1d3,#f171ab);border:solid 1px #d2729e;color:#feeef5;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#feb1d3',endColorstr='#f171ab');}
.pink:hover{background:#d57ea5;background:-webkit-gradient(linear,left top,left bottom,from(#f4aacb),to(#e86ca4));background:-moz-linear-gradient(top,#f4aacb,#e86ca4);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f4aacb',endColorstr='#e86ca4');}
.pink:active{background:-webkit-gradient(linear,left top,left bottom,from(#f171ab),to(#feb1d3));background:-moz-linear-gradient(top,#f171ab,#feb1d3);color:#f3c3d9;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f171ab',endColorstr='#feb1d3');}

.red{background:#d81b21;background:-webkit-gradient(linear,left top,left bottom,from(#ed1c24),to(#aa1317));background:-moz-linear-gradient(top,#ed1c24,#aa1317);border:solid 1px #980c10;color:#faddde;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ed1c24',endColorstr='#aa1317');}
.red:hover{background:#b61318;background:-webkit-gradient(linear,left top,left bottom,from(#c9151b),to(#a11115));background:-moz-linear-gradient(top,#c9151b,#a11115);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#c9151b',endColorstr='#a11115');}
.red:active{background:-webkit-gradient(linear,left top,left bottom,from(#aa1317),to(#ed1c24));background:-moz-linear-gradient(top,#aa1317,#ed1c24);color:#de898c;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#aa1317',endColorstr='#ed1c24');}

.rosy{background:#da5867;background:-webkit-gradient(linear,left top,left bottom,from(#f16c7c),to(#bf404f));background:-moz-linear-gradient(top,#f16c7c,#bf404f);border:solid 1px #b73948;color:#fae7e9;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f16c7c',endColorstr='#bf404f');}
.rosy:hover{background:#ba4b58;background:-webkit-gradient(linear,left top,left bottom,from(#cf5d6a),to(#a53845));background:-moz-linear-gradient(top,#cf5d6a,#a53845);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#cf5d6a',endColorstr='#a53845');}
.rosy:active{background:-webkit-gradient(linear,left top,left bottom,from(#bf404f),to(#f16c7c));background:-moz-linear-gradient(top,#bf404f,#f16c7c);color:#dca4ab;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#bf404f',endColorstr='#f16c7c');}

.white{background:#fff;background:-webkit-gradient(linear,left top,left bottom,from(#fff),to(#ededed));background:-moz-linear-gradient(top,#fff,#ededed);border:solid 1px #b7b7b7;color:#606060;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',endColorstr='#ededed');}
.white:hover{background:#ededed;background:-webkit-gradient(linear,left top,left bottom,from(#fff),to(#dcdcdc));background:-moz-linear-gradient(top,#fff,#dcdcdc);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',endColorstr='#dcdcdc');}
.white:active{background:-webkit-gradient(linear,left top,left bottom,from(#ededed),to(#fff));background:-moz-linear-gradient(top,#ededed,#fff);color:#999;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed',endColorstr='#ffffff');}