基于CSS3的漂亮按钮

使用CSS3来制作圆角阴影、渐变色的漂亮按钮，不需要任何图片和javascript脚本，只需要CSS3就可以轻松实现按钮效果，并且可以适用于任意HTML元素，如div，span，p，a，button，input等，适用于任意HTML元素，且大小随字号的改变而改变。
效果：

css：.button {<br>     display: inline-block;<br>     outline: none;<br>     cursor: pointer;<br>     text-align: center;<br>     text-decoration: none;<br>     font: 16px/100% 'Microsoft yahei',Arial, Helvetica, sans-serif;<br>     padding: .5em 2em .55em;<br>     text-shadow: 0 1px 1px rgba(0,0,0,.3);<br>     -webkit-border-radius: .5em; <br>     -moz-border-radius: .5em;<br>     border-radius: .5em;<br>     -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);<br>     -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);<br>     box-shadow: 0 1px 2px rgba(0,0,0,.2);<br> }<br> .button:hover {<br>     text-decoration: none;<br> }<br> .button:active {<br>     position: relative;<br>     top: 1px;<br> }<br> .bigrounded {<br>     -webkit-border-radius: 2em;<br>     -moz-border-radius: 2em;<br>     border-radius: 2em;<br> }<br> .medium {<br>     font-size: 12px;<br>     padding: .4em 1.5em .42em;<br> }<br> .small {<br>     font-size: 11px;<br>     padding: .2em 1em .275em;<br> }<br> <br> <br> /* blue */<br> .blue {<br>     color: #d9eef7;<br>     border: solid 1px #0076a3;<br>     background: #0095cd;<br>     background: -webkit-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5));<br>     background: -moz-linear-gradient(top,  #00adee,  #0078a5);<br>     filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#00adee', endColorstr='#0078a5');<br> }<br> .blue:hover {<br>     background: #007ead;<br>     background: -webkit-gradient(linear, left top, left bottom, from(#0095cc), to(#00678e));<br>     background: -moz-linear-gradient(top,  #0095cc,  #00678e);<br>     filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#0095cc', endColorstr='#00678e');<br> }<br> .blue:active {<br>     color: #80bed6;<br>     background: -webkit-gradient(linear, left top, left bottom, from(#0078a5), to(#00adee));<br>     background: -moz-linear-gradient(top,  #0078a5,  #00adee);<br>     filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#0078a5', endColorstr='#00adee');<br> }<br> <br> /* green */<br> .green {<br>     color: #e8f0de;<br>     border: solid 1px #538312;<br>     background: #64991e;<br>     background: -webkit-gradient(linear, left top, left bottom, from(#7db72f), to(#4e7d0e));<br>     background: -moz-linear-gradient(top,  #7db72f,  #4e7d0e);<br>     filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#7db72f', endColorstr='#4e7d0e');<br> }<br> .green:hover {<br>     background: #538018;<br>     background: -webkit-gradient(linear, left top, left bottom, from(#6b9d28), to(#436b0c));<br>     background: -moz-linear-gradient(top,  #6b9d28,  #436b0c);<br>     filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#6b9d28', endColorstr='#436b0c');<br> }<br> .green:active {<br>     color: #a9c08c;<br>     background: -webkit-gradient(linear, left top, left bottom, from(#4e7d0e), to(#7db72f));<br>     background: -moz-linear-gradient(top,  #4e7d0e,  #7db72f);<br>     filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#4e7d0e', endColorstr='#7db72f');<br> }<br> <br> /* white */<br> .white {<br>     color: #606060;<br>     border: solid 1px #b7b7b7;<br>     background: #fff;<br>     background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed));<br>     background: -moz-linear-gradient(top,  #fff,  #ededed);<br>     filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed');<br> }<br> .white:hover {<br>     background: #ededed;<br>     background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#dcdcdc));<br>     background: -moz-linear-gradient(top,  #fff,  #dcdcdc);<br>     filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#dcdcdc');<br> }<br> .white:active {<br>     color: #999;<br>     background: -webkit-gradient(linear, left top, left bottom, from(#ededed), to(#fff));<br>     background: -moz-linear-gradient(top,  #ededed,  #fff);<br>     filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#ffffff');<br> }<br> <br> /* orange */<br> .orange {<br>     color: #fef4e9;<br>     border: solid 1px #da7c0c;<br>     background: #f78d1d;<br>     background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));<br>     background: -moz-linear-gradient(top,  #faa51a,  #f47a20);<br>     filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');<br> }<br> .orange:hover {<br>     background: #f47c20;<br>     background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015));<br>     background: -moz-linear-gradient(top,  #f88e11,  #f06015);<br>     filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015');<br> }<br> .orange:active {<br>     color: #fcd3a5;<br>     background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a));<br>     background: -moz-linear-gradient(top,  #f47a20,  #faa51a);<br>     filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a');<br> }html：<div> <br>         <a>蓝色</a> <br>         <a>Rounded</a> <br>         <a>Medium</a> <br>         <a>Small</a> <br>         <br>         <input> <br>         <button>Button Tag</button><br>     </div> <br>     <br>     <div> <br>         <a>绿色</a> <br>         <a>Rounded</a> <br>         <a>Medium</a> <br>         <a>Small</a> <br>         <br>         <input> <br>         <button>Button Tag</button><br>     </div> <br>     <br>     <div> <br>         <a>灰白</a> <br>         <a>Rounded</a> <br>         <a>Medium</a> <br>         <a>Small</a> <br>         <input> <br>         <button>Button Tag</button><br>     </div> <br>     <br>     <div> <br>         <a>橘红</a> <br>         <a>Rounded</a> <br>         <a>Medium</a> <br>         <a>Small</a> <br>         <input> <br>         <button>Button Tag</button><br>     </div>----------------------------------------------------------+++++++++++++++--------------------------------------------------
这么好的东西，你必须：
称赞之
收藏之
扩展之

AD：真正免费，域名+虚机+企业邮箱=0元