CSS3按钮代码集

代码说明

超多的CSS3按钮特效代码集，各种样式和颜色风格，漂亮实用，无使用任何图片，相信有你喜欢的。需要CSS按钮美化代码的可不要错过哦，研究学习CSS3也是很有用的东西，期待大家关注。

HTML代码

<style> *{margin: 0;padding: 0;} body{color: #eee;background: url('http://www.codefans.net/jscss/demoimg/201310/page_bg.jpg') repeat-x #f3f3f3;font: 15px Calibri,Arial,sans-serif;border-top: 5px solid #212121;} #buttonContainer{background: url('http://www.codefans.net/jscss/demoimg/201310/section_bg.png');border: 1px solid #F4F4F4;margin: 120px auto 0;overflow: hidden;padding: 20px 0 35px 45px;width: 440px;-moz-box-shadow: 0 0 10px #C4C4C4;-webkit-box-shadow: 0 0 10px #C4C4C4;box-shadow: 0 0 10px #C4C4C4;} #buttonContainer a{float: left;margin: 15px 15px 0 0;} #footer{background-color: #212121;position: fixed;width: 100%;height: 70px;bottom: 0;left: 0;} a.tzine{background: url("http://www.codefans.net/img/tzine.png") no-repeat right top;border: none;color: #FCFCFC;font-size: 12px;height: 70px;left: 50%;line-height: 31px;margin: 23px 0 0 110px;position: absolute;top: 0;width: 290px;} p.note{color: #999999;font-style: italic;margin: 50px 0 120px;text-align: center;text-shadow: 1px 1px 0 #FFFFFF;} .tri{border-color: transparent transparent #212121;border-style: solid;border-width: 20px 17px;height: 0;left: 50%;margin: -40px 0 0 -400px;position: absolute;top: 0;width: 0;} h1{font-size: 20px;font-weight: normal;left: 50%;margin-left: -400px;padding: 25px 0;position: absolute;width: 400px;} a, a: visited{text-decoration: none;outline: none;border-bottom: 1px dotted #97cae6;color: #97cae6;} a: hover{border-bottom: 1px dashed transparent;} .clear{clear: both;} .button{font: 15px Calibri, Arial, sans-serif;text-shadow: 1px 1px 0 rgba(255,255,255,0.4);text-decoration: none !important;white-space: nowrap;display: inline-block;vertical-align: baseline;position: relative;cursor: pointer;padding: 10px 20px;background-repeat: no-repeat;background-position: bottom left;background-image: url('http://www.codefans.net/jscss/demoimg/201310/button_bg.png');background-position: bottom left, top right, 0 0, 0 0;background-clip: border-box;-moz-border-radius: 8px;-webkit-border-radius: 8px;border-radius: 8px;-moz-box-shadow: 0 0 1px #fff inset;-webkit-box-shadow: 0 0 1px #fff inset;box-shadow: 0 0 1px #fff inset;-webkit-transition: background-position 1s;-moz-transition: background-position 1s;transition: background-position 1s;} .button: hover{background-position: top left;background-position: top left, bottom right, 0 0, 0 0;} .button: active{bottom: -1px;} .button.big{font-size: 30px;} .button.medium{font-size: 18px;} .button.small{font-size: 13px;} .button.rounded{-moz-border-radius: 4em;-webkit-border-radius: 4em;border-radius: 4em;} .blue.button{color: #0f4b6d !important;border: 1px solid #84acc3 !important;background-color: #48b5f2;background-image:url('http://www.codefans.net/jscss/demoimg/201310/button_bg.png'), url('http://www.codefans.net/jscss/demoimg/201310/button_bg.png'),-moz-radial-gradient(center bottom, circle,rgba(89,208,244,1) 0,rgba(89,208,244,0) 100px),-moz-linear-gradient(#4fbbf7, #3faeeb);background-image:url('http://www.codefans.net/jscss/demoimg/201310/button_bg.png'), url('http://www.codefans.net/jscss/demoimg/201310/button_bg.png'),-webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100,-webkit-gradient(linear, 0% 0%, 0% 100%, from(#4fbbf7), to(#3faeeb));} .blue.button: hover{background-color: #63c7fe;background-image:url('http://www.codefans.net/jscss/demoimg/201310/button_bg.png'), url('http://www.codefans.net/jscss/demoimg/201310/button_bg.png'),-moz-radial-gradient(center bottom, circle, rgba(109,217,250,1) 0,rgba(109,217,250,0) 100px),-moz-linear-gradient(#63c7fe, #58bef7);background-image:url('http://www.codefans.net/jscss/demoimg/201310/button_bg.png'), url('http://www.codefans.net/jscss/demoimg/201310/button_bg.png'),-webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100,-webkit-gradient(linear, 0% 0%, 0% 100%, from(#63c7fe), to(#58bef7));} .green.button{color: #345903 !important;border: 1px solid #96a37b !important;background-color: #79be1e;background-image: url('http://www.codefans.net/jscss/demoimg/201310/button_bg.png'), url('http://www.codefans.net/jscss/demoimg/201310/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(162,211,30,1) 0,rgba(162,211,30,0) 100px),-moz-linear-gradient(#82cc27, #74b317);background-image: url('http://www.codefans.net/jscss/demoimg/201310/button_bg.png'), url('http://www.codefans.net/jscss/demoimg/201310/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(162,211,30,1)), to(rgba(162,211,30,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#82cc27), to(#74b317));} .green.button: hover{background-color: #89d228;background-image: url('http://www.codefans.net/jscss/demoimg/201310/button_bg.png'), url('http://www.codefans.net/jscss/demoimg/201310/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(183,229,45,1) 0,rgba(183,229,45,0) 100px),-moz-linear-gradient(#90de31, #7fc01e);background-image: url('http://www.codefans.net/jscss/demoimg/201310/button_bg.png'), url('http://www.codefans.net/jscss/demoimg/201310/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(183,229,45,1)), to(rgba(183,229,45,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#90de31), to(#7fc01e));} .orange.button{color: #693e0a !important;border: 1px solid #bea280 !important;background-color: #e38d27;background-image: url('http://www.codefans.net/jscss/demoimg/201310/button_bg.png'), url('http://www.codefans.net/jscss/demoimg/201310/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(232,189,45,1) 0,rgba(232,189,45,0) 100px),-moz-linear-gradient(#f1982f, #d4821f);background-image: url('http://www.codefans.net/jscss/demoimg/201310/button_bg.png'), url('http://www.codefans.net/jscss/demoimg/201310/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(232,189,45,1)), to(rgba(232,189,45,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#f1982f), to(#d4821f));} .orange.button: hover{background-color: #ec9732;background-image: url('http://www.codefans.net/jscss/demoimg/201310/button_bg.png'), url('http://www.codefans.net/jscss/demoimg/201310/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(241,192,52,1) 0,rgba(241,192,52,0) 100px),-moz-linear-gradient(#f9a746, #e18f2b);background-image: url('http://www.codefans.net/jscss/demoimg/201310/button_bg.png'), url('http://www.codefans.net/jscss/demoimg/201310/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(241,192,52,1)), to(rgba(241,192,52,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#f9a746), to(#e18f2b));} .gray.button{color: #525252 !important;border: 1px solid #a5a5a5 !important;background-color: #a9adb1;background-image: url('http://www.codefans.net/jscss/demoimg/201310/button_bg.png'), url('http://www.codefans.net/jscss/demoimg/201310/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(197,199,202,1) 0,rgba(197,199,202,0) 100px),-moz-linear-gradient(#c5c7ca, #92989c);background-image: url('http://www.codefans.net/jscss/demoimg/201310/button_bg.png'), url('http://www.codefans.net/jscss/demoimg/201310/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(197,199,202,1)), to(rgba(197,199,202,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#c5c7ca), to(#92989c));} .gray.button: hover{background-color: #b6bbc0;background-image: url('http://www.codefans.net/jscss/demoimg/201310/button_bg.png'), url('http://www.codefans.net/jscss/demoimg/201310/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(202,205,208,1) 0,rgba(202,205,208,0) 100px),-moz-linear-gradient(#d1d3d6, #9fa5a9);background-image: url('http://www.codefans.net/jscss/demoimg/201310/button_bg.png'), url('http://www.codefans.net/jscss/demoimg/201310/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(202,205,208,1)), to(rgba(202,205,208,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#d1d3d6), to(#9fa5a9));} </style> </head> <body> <div id="buttonContainer"> <a href="#" class="button big blue">Big Button</a> <a href="#" class="button big green">Big Button</a> <a href="#" class="button big orange">Big Button</a> <a href="#" class="button big gray">Big Button</a> <a href="#" class="中文按钮">中文的</a> <a href="#" class="button green medium">Medium Button</a> <a href="#" class="button orange medium">Medium Button</a> <a href="#" class="button gray medium">Medium Button</a> <a href="#" class="源码爱好者">源码爱好者</a> <a href="#" class="button small green">Small Button</a> <a href="#" class="button small blue rounded">Rounded</a> <a href="#" class="button small orange">Small Button</a> <a href="#" class="button small gray">Small Button</a> <a href="#" class="button small green rounded">Rounded</a> </div> <p class="note">最佳浏览器 Safari & Chrome</p>

代码演示

最佳浏览器 Safari & Chrome