下面我们就给大家介绍一些好看的button样式，大家可以直接复制代码在本地查看效果。这里的button样式没有使用任何图片，可以直接复制代码就可以了！
注：源码里面使用了多种html标签做成按钮，有a，input，span，div，p，h3。总有适合你的标签
button样式源码如下：
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="content-type" content="text/html; charset=utf-8" /><title>demo: css3 buttons</title><style type="text/css">body { background: #ededed; width: 900px; margin: 30px auto; color: #999;}p { margin: 0 0 2em;}h1 { margin: 0;}a { color: #339; text-decoration: none;}a:hover { text-decoration: underline;}div { padding: 20px 0; border-bottom: solid 1px #ccc;} /* button ---------------------------------------------- */.button { display: inline-block; zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */ *display: inline; vertical-align: baseline; margin: 0 2px; 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);}.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: .4em 1.5em .42em;}.small { font-size: 11px; padding: .2em 1em .275em;} /* color styles ---------------------------------------------- */ /* black */.black { color: #d7d7d7; border: solid 1px #333; background: #333; background: -webkit-gradient(linear, left top, left bottom, 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, 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 { color: #666; background: -webkit-gradient(linear, left top, left bottom, 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: solid 1px #555; background: #6e6e6e; background: -webkit-gradient(linear, left top, left bottom, 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, 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 { color: #afafaf; background: -webkit-gradient(linear, left top, left bottom, 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: solid 1px #b7b7b7; background: #fff; background: -webkit-gradient(linear, left top, left bottom, 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, 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 { color: #999; background: -webkit-gradient(linear, left top, left bottom, 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: solid 1px #da7c0c; background: #f78d1d; background: -webkit-gradient(linear, left top, left bottom, 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, 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 { 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');} /* red */.red { color: #faddde; border: solid 1px #980c10; background: #d81b21; background: -webkit-gradient(linear, left top, left bottom, 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, 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 { color: #de898c; background: -webkit-gradient(linear, left top, left bottom, 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: solid 1px #0076a3; background: #0095cd; background: -webkit-gradient(linear, left top, left bottom, 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, 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 { color: #80bed6; background: -webkit-gradient(linear, left top, left bottom, 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: solid 1px #b73948; background: #da5867; background: -webkit-gradient(linear, left top, left bottom, 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, 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 { color: #dca4ab; background: -webkit-gradient(linear, left top, left bottom, 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: solid 1px #538312; background: #64991e; background: -webkit-gradient(linear, left top, left bottom, 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, 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 { color: #a9c08c; background: -webkit-gradient(linear, left top, left bottom, 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: solid 1px #d2729e; background: #f895c2; background: -webkit-gradient(linear, left top, left bottom, 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, 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 { color: #f3c3d9; background: -webkit-gradient(linear, left top, left bottom, from(#f171ab), to(#feb1d3)); background: -moz-linear-gradient(top, #f171ab, #feb1d3); filter: progid:dximagetransform.microsoft.gradient(startcolorstr='#f171ab', endcolorstr='#feb1d3');} </style></head> <body><h1><a href="http://www.webdesignerwall.com/tutorials/css3-gradient-buttons/">css3 gradient buttons</a></h1><p><em>by</em> <a href="http://www.webdesignerwall.com">web designer wall</a></p> <div> <a href="#" class="button black">rectangle</a> or <a href="#" class="button black bigrounded">rounded</a> can be <a href="#" class="button black medium">medium</a> or <a href="#" class="button black small">small</a> <br /><br /> <input class="button black" type="button" value="input element" /> <button class="button black">button tag</button> <span class="button black">span</span> <div class="button black">div</div> <p class="button black">p tag</p> <h3 class="button black">h3</h3> </div> <div> <a href="#" class="button gray">gray</a> <a href="#" class="button gray bigrounded">rounded</a> <a href="#" class="button gray medium">medium</a> <a href="#" class="button gray small">small</a> <br /><br /> <input class="button gray" type="button" value="input element" /> <button class="button gray">button tag</button> <span class="button gray">span</span> <div class="button gray">div</div> <p class="button gray">p tag</p> <h3 class="button gray">h3</h3> </div> <div> <a href="#" class="button white">white</a> <a href="#" class="button white bigrounded">rounded</a> <a href="#" class="button white medium">medium</a> <a href="#" class="button white small">small</a> <br /><br /> <input class="button white" type="button" value="input element" /> <button class="button white">button tag</button> <span class="button white">span</span> <div class="button white">div</div> <p class="button white">p tag</p> <h3 class="button white">h3</h3> </div> <div> <a href="#" class="button orange">orange</a> <a href="#" class="button orange bigrounded">rounded</a> <a href="#" class="button orange medium">medium</a> <a href="#" class="button orange small">small</a> <br /><br /> <input class="button orange" type="button" value="input element" /> <button class="button orange">button tag</button> <span class="button orange">span</span> <div class="button orange">div</div> <p class="button orange">p tag</p> <h3 class="button orange">h3</h3> </div> <div> <a href="#" class="button red">red</a> <a href="#" class="button red bigrounded">rounded</a> <a href="#" class="button red medium">medium</a> <a href="#" class="button red small">small</a> <br /><br /> <input class="button red" type="button" value="input element" /> <button class="button red">button tag</button> <span class="button red">span</span> <div class="button red">div</div> <p class="button red">p tag</p> <h3 class="button red">h3</h3> </div> <div> <a href="#" class="button blue">blue</a> <a href="#" class="button blue bigrounded">rounded</a> <a href="#" class="button blue medium">medium</a> <a href="#" class="button blue small">small</a> <br /><br /> <input class="button blue" type="button" value="input element" /> <button class="button blue">button tag</button> <span class="button blue">span</span> <div class="button blue">div</div> <p class="button blue">p tag</p> <h3 class="button blue">h3</h3> </div> <div> <a href="#" class="button rosy">rosy</a> <a href="#" class="button rosy bigrounded">rounded</a> <a href="#" class="button rosy medium">medium</a> <a href="#" class="button rosy small">small</a> <br /><br /> <input class="button rosy" type="button" value="input element" /> <button class="button rosy">button tag</button> <span class="button rosy">span</span> <div class="button rosy">div</div> <p class="button rosy">p tag</p> <h3 class="button rosy">h3</h3> </div> <div> <a href="#" class="button green">green</a> <a href="#" class="button green bigrounded">rounded</a> <a href="#" class="button green medium">medium</a> <a href="#" class="button green small">small</a> <br /><br /> <input class="button green" type="button" value="input element" /> <button class="button green">button tag</button> <span class="button green">span</span> <div class="button green">div</div> <p class="button green">p tag</p> <h3 class="button green">h3</h3> </div> <div> <a href="#" class="button pink">pink</a> <a href="#" class="button pink bigrounded">rounded</a> <a href="#" class="button pink medium">medium</a> <a href="#" class="button pink small">small</a> <br /><br /> <input class="button pink" type="button" value="input element" /> <button class="button pink">button tag</button> <span class="button pink">span</span> <div class="button pink">div</div> <p class="button pink">p tag</p> <h3 class="button pink">h3</h3> </div> </body></html>
效果图片：
相关推荐：《css教程》
以上就是漂亮的css button样式汇总的详细内容。