css中如何实现不同的button样式
这篇文章将为大家详细讲解有关css中如何实现不同的button样式，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。
在网页设计过程中，程序员们常常需要配合美工来设计页面的美观效果，当然大部分页面风格都是美工的工作。但是按钮button样式，是我们程序员最常用的。
注：源码里面使用了多种html标签做成按钮，有a，input，span，div，p，h4。总有适合你的标签
button样式源码如下：
body{
background:#ededed;
width:900px;
margin:30pxauto;
color:#999;
}
p{
margin:002em;
}
h2{
margin:0;
}
a{
color:#339;
text-decoration:none;
}
a:hover{
text-decoration:underline;
}
div{
padding:20px0;
border-bottom:solid1px#ccc;
}
/*button
----------------------------------------------*/
.button{
display:inline-block;
zoom:1;/*zoomand*display=ie7hackfordisplay:inline-block*/
*display:inline;
vertical-align:baseline;
margin:02px;
outline:none;
cursor:pointer;
text-align:center;
text-decoration:none;
font:14px/100%Arial,Helvetica,sans-serif;
padding:.5em2em.55em;
text-shadow:01px1pxrgba(0,0,0,.3);
-webkit-border-radius:.5em;
-moz-border-radius:.5em;
border-radius:.5em;
-webkit-box-shadow:01px2pxrgba(0,0,0,.2);
-moz-box-shadow:01px2pxrgba(0,0,0,.2);
box-shadow:01px2pxrgba(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;
}
.medium{
font-size:12px;
padding:.4em1.5em.42em;
}
.small{
font-size:11px;
padding:.2em1em.275em;
}
/*colorstyles
----------------------------------------------*/
/*black*/
.black{
color:#d7d7d7;
border:solid1px#333;
background:#333;
background:-webkit-gradient(linear,lefttop,leftbottom,from(#666),to(#000));
background:-moz-linear-gradient(top,#666,#000);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#666666',endColorstr='#000000');
}
.black:hover{
background:#000;
background:-webkit-gradient(linear,lefttop,leftbottom,from(#444),to(#000));
background:-moz-linear-gradient(top,#444,#000);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444',endColorstr='#000000');
}
.black:active{
color:#666;
background:-webkit-gradient(linear,lefttop,leftbottom,from(#000),to(#444));
background:-moz-linear-gradient(top,#000,#444);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000',endColorstr='#666666');
}
/*gray*/
.gray{
color:#e9e9e9;
border:solid1px#555;
background:#6e6e6e;
background:-webkit-gradient(linear,lefttop,leftbottom,from(#888),to(#575757));
background:-moz-linear-gradient(top,#888,#575757);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#888888',endColorstr='#575757');
}
.gray:hover{
background:#616161;
background:-webkit-gradient(linear,lefttop,leftbottom,from(#757575),to(#4b4b4b));
background:-moz-linear-gradient(top,#757575,#4b4b4b);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#757575',endColorstr='#4b4b4b');
}
.gray:active{
color:#afafaf;
background:-webkit-gradient(linear,lefttop,leftbottom,from(#575757),to(#888));
background:-moz-linear-gradient(top,#575757,#888);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#575757',endColorstr='#888888');
}
/*white*/
.white{
color:#606060;
border:solid1px#b7b7b7;
background:#fff;
background:-webkit-gradient(linear,lefttop,leftbottom,from(#fff),to(#ededed));
background:-moz-linear-gradient(top,#fff,#ededed);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',endColorstr='#ededed');
}
.white:hover{
background:#ededed;
background:-webkit-gradient(linear,lefttop,leftbottom,from(#fff),to(#dcdcdc));
background:-moz-linear-gradient(top,#fff,#dcdcdc);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',endColorstr='#dcdcdc');
}
.white:active{
color:#999;
background:-webkit-gradient(linear,lefttop,leftbottom,from(#ededed),to(#fff));
background:-moz-linear-gradient(top,#ededed,#fff);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed',endColorstr='#ffffff');
}
/*orange*/
.orange{
color:#fef4e9;
border:solid1px#da7c0c;
background:#f78d1d;
background:-webkit-gradient(linear,lefttop,leftbottom,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,lefttop,leftbottom,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,lefttop,leftbottom,from(#f47a20),to(#faa51a));
background:-moz-linear-gradient(top,#f47a20,#faa51a);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20',endColorstr='#faa51a');
}
/*red*/
.red{
color:#faddde;
border:solid1px#980c10;
background:#d81b21;
background:-webkit-gradient(linear,lefttop,leftbottom,from(#ed1c24),to(#aa1317));
background:-moz-linear-gradient(top,#ed1c24,#aa1317);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ed1c24',endColorstr='#aa1317');
}
.red:hover{
background:#b61318;
background:-webkit-gradient(linear,lefttop,leftbottom,from(#c9151b),to(#a11115));
background:-moz-linear-gradient(top,#c9151b,#a11115);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#c9151b',endColorstr='#a11115');
}
.red:active{
color:#de898c;
background:-webkit-gradient(linear,lefttop,leftbottom,from(#aa1317),to(#ed1c24));
background:-moz-linear-gradient(top,#aa1317,#ed1c24);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#aa1317',endColorstr='#ed1c24');
}
/*blue*/
.blue{
color:#d9eef7;
border:solid1px#0076a3;
background:#0095cd;
background:-webkit-gradient(linear,lefttop,leftbottom,from(#00adee),to(#0078a5));
background:-moz-linear-gradient(top,#00adee,#0078a5);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#00adee',endColorstr='#0078a5');
}
.blue:hover{
background:#007ead;
background:-webkit-gradient(linear,lefttop,leftbottom,from(#0095cc),to(#00678e));
background:-moz-linear-gradient(top,#0095cc,#00678e);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0095cc',endColorstr='#00678e');
}
.blue:active{
color:#80bed6;
background:-webkit-gradient(linear,lefttop,leftbottom,from(#0078a5),to(#00adee));
background:-moz-linear-gradient(top,#0078a5,#00adee);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0078a5',endColorstr='#00adee');
}
/*rosy*/
.rosy{
color:#fae7e9;
border:solid1px#b73948;
background:#da5867;
background:-webkit-gradient(linear,lefttop,leftbottom,from(#f16c7c),to(#bf404f));
background:-moz-linear-gradient(top,#f16c7c,#bf404f);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f16c7c',endColorstr='#bf404f');
}
.rosy:hover{
background:#ba4b58;
background:-webkit-gradient(linear,lefttop,leftbottom,from(#cf5d6a),to(#a53845));
background:-moz-linear-gradient(top,#cf5d6a,#a53845);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#cf5d6a',endColorstr='#a53845');
}
.rosy:active{
color:#dca4ab;
background:-webkit-gradient(linear,lefttop,leftbottom,from(#bf404f),to(#f16c7c));
background:-moz-linear-gradient(top,#bf404f,#f16c7c);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#bf404f',endColorstr='#f16c7c');
}
/*green*/
.green{
color:#e8f0de;
border:solid1px#538312;
background:#64991e;
background:-webkit-gradient(linear,lefttop,leftbottom,from(#7db72f),to(#4e7d0e));
background:-moz-linear-gradient(top,#7db72f,#4e7d0e);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#7db72f',endColorstr='#4e7d0e');
}
.green:hover{
background:#538018;
background:-webkit-gradient(linear,lefttop,leftbottom,from(#6b9d28),to(#436b0c));
background:-moz-linear-gradient(top,#6b9d28,#436b0c);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#6b9d28',endColorstr='#436b0c');
}
.green:active{
color:#a9c08c;
background:-webkit-gradient(linear,lefttop,leftbottom,from(#4e7d0e),to(#7db72f));
background:-moz-linear-gradient(top,#4e7d0e,#7db72f);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#4e7d0e',endColorstr='#7db72f');
}
/*pink*/
.pink{
color:#feeef5;
border:solid1px#d2729e;
background:#f895c2;
background:-webkit-gradient(linear,lefttop,leftbottom,from(#feb1d3),to(#f171ab));
background:-moz-linear-gradient(top,#feb1d3,#f171ab);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#feb1d3',endColorstr='#f171ab');
}
.pink:hover{
background:#d57ea5;
background:-webkit-gradient(linear,lefttop,leftbottom,from(#f4aacb),to(#e86ca4));
background:-moz-linear-gradient(top,#f4aacb,#e86ca4);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f4aacb',endColorstr='#e86ca4');
}
.pink:active{
color:#f3c3d9;
background:-webkit-gradient(linear,lefttop,leftbottom,from(#f171ab),to(#feb1d3));
background:-moz-linear-gradient(top,#f171ab,#feb1d3);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f171ab',endColorstr='#feb1d3');
}
CSS3GradientButtons
by