这篇文章将为大家详细讲解有关css中如何实现不同的button样式，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。
在网页设计过程中，程序员们常常需要配合美工来设计页面的美观效果，当然大部分页面风格都是美工的工作。但是按钮button样式，是我们程序员最常用的。
注：源码里面使用了多种html标签做成按钮，有a，input，span，div，p，h4。总有适合你的标签
button样式源码如下：
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"/>
<title>Demo:CSS3Buttons</title>
<styletype="text/css">
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');
}
</style>
</head>
<body>
<h2><ahref="http://www.webdesignerwall.com/tutorials/css3-gradient-buttons/">CSS3GradientButtons</a></h2>
<p><em>by</em><ahref="http://www.webdesignerwall.com">WebDesignerWall</a></p>
<div>
<ahref="#"class="buttonblack">Rectangle</a>or
<ahref="#"class="buttonblackbigrounded">Rounded</a>Canbe
<ahref="#"class="buttonblackmedium">Medium</a>or
<ahref="#"class="buttonblacksmall">Small</a>
<br/><br/>
<inputclass="buttonblack"type="button"value="InputElement"/>
<buttonclass="buttonblack">ButtonTag</button>
<spanclass="buttonblack">Span</span>
<divclass="buttonblack">Div</div>
<pclass="buttonblack">PTag</p>
<h4class="buttonblack">H3</h4>
</div>
<div>
<ahref="#"class="buttongray">Gray</a>
<ahref="#"class="buttongraybigrounded">Rounded</a>
<ahref="#"class="buttongraymedium">Medium</a>
<ahref="#"class="buttongraysmall">Small</a>
<br/><br/>
<inputclass="buttongray"type="button"value="InputElement"/>
<buttonclass="buttongray">ButtonTag</button>
<spanclass="buttongray">Span</span>
<divclass="buttongray">Div</div>
<pclass="buttongray">PTag</p>
<h4class="buttongray">H3</h4>
</div>
<div>
<ahref="#"class="buttonwhite">White</a>
<ahref="#"class="buttonwhitebigrounded">Rounded</a>
<ahref="#"class="buttonwhitemedium">Medium</a>
<ahref="#"class="buttonwhitesmall">Small</a>
<br/><br/>
<inputclass="buttonwhite"type="button"value="InputElement"/>
<buttonclass="buttonwhite">ButtonTag</button>
<spanclass="buttonwhite">Span</span>
<divclass="buttonwhite">Div</div>
<pclass="buttonwhite">PTag</p>
<h4class="buttonwhite">H3</h4>
</div>
<div>
<ahref="#"class="buttonorange">Orange</a>
<ahref="#"class="buttonorangebigrounded">Rounded</a>
<ahref="#"class="buttonorangemedium">Medium</a>
<ahref="#"class="buttonorangesmall">Small</a>
<br/><br/>
<inputclass="buttonorange"type="button"value="InputElement"/>
<buttonclass="buttonorange">ButtonTag</button>
<spanclass="buttonorange">Span</span>
<divclass="buttonorange">Div</div>
<pclass="buttonorange">PTag</p>
<h4class="buttonorange">H3</h4>
</div>
<div>
<ahref="#"class="buttonred">Red</a>
<ahref="#"class="buttonredbigrounded">Rounded</a>
<ahref="#"class="buttonredmedium">Medium</a>
<ahref="#"class="buttonredsmall">Small</a>
<br/><br/>
<inputclass="buttonred"type="button"value="InputElement"/>
<buttonclass="buttonred">ButtonTag</button>
<spanclass="buttonred">Span</span>
<divclass="buttonred">Div</div>
<pclass="buttonred">PTag</p>
<h4class="buttonred">H3</h4>
</div>
<div>
<ahref="#"class="buttonblue">Blue</a>
<ahref="#"class="buttonbluebigrounded">Rounded</a>
<ahref="#"class="buttonbluemedium">Medium</a>
<ahref="#"class="buttonbluesmall">Small</a>
<br/><br/>
<inputclass="buttonblue"type="button"value="InputElement"/>
<buttonclass="buttonblue">ButtonTag</button>
<spanclass="buttonblue">Span</span>
<divclass="buttonblue">Div</div>
<pclass="buttonblue">PTag</p>
<h4class="buttonblue">H3</h4>
</div>
<div>
<ahref="#"class="buttonrosy">Rosy</a>
<ahref="#"class="buttonrosybigrounded">Rounded</a>
<ahref="#"class="buttonrosymedium">Medium</a>
<ahref="#"class="buttonrosysmall">Small</a>
<br/><br/>
<inputclass="buttonrosy"type="button"value="InputElement"/>
<buttonclass="buttonrosy">ButtonTag</button>
<spanclass="buttonrosy">Span</span>
<divclass="buttonrosy">Div</div>
<pclass="buttonrosy">PTag</p>
<h4class="buttonrosy">H3</h4>
</div>
<div>
<ahref="#"class="buttongreen">Green</a>
<ahref="#"class="buttongreenbigrounded">Rounded</a>
<ahref="#"class="buttongreenmedium">Medium</a>
<ahref="#"class="buttongreensmall">Small</a>
<br/><br/>
<inputclass="buttongreen"type="button"value="InputElement"/>
<buttonclass="buttongreen">ButtonTag</button>
<spanclass="buttongreen">Span</span>
<divclass="buttongreen">Div</div>
<pclass="buttongreen">PTag</p>
<h4class="buttongreen">H3</h4>
</div>
<div>
<ahref="#"class="buttonpink">Pink</a>
<ahref="#"class="buttonpinkbigrounded">Rounded</a>
<ahref="#"class="buttonpinkmedium">Medium</a>
<ahref="#"class="buttonpinksmall">Small</a>
<br/><br/>
<inputclass="buttonpink"type="button"value="InputElement"/>
<buttonclass="buttonpink">ButtonTag</button>
<spanclass="buttonpink">Span</span>
<divclass="buttonpink">Div</div>
<pclass="buttonpink">PTag</p>
<h4class="buttonpink">H3</h4>
</div>
</body>
</html>
关于“css中如何实现不同的button样式”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
