<!DOCTYPE HTML><html><head><meta charset="utf-8"><title>div+CSS3实现制作精美漂亮的圆角按钮特效代码</title><style type="text/css">.demo{width:760px; margin:20px auto 0 auto; height:70px;}.button {display: inline-block;outline: none;cursor: pointer;text-align: center;text-decoration: none;font: 16px/100% 'Microsoft yahei',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;}/* 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');}/* 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');}/* 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');}</style></head><body><div id="main"><div class="demo"><a href="#" class="button blue">蓝色</a> <a href="#" class="button blue bigrounded">圆形</a> <a href="#" class="button blue medium">中btn</a> <a href="#" class="button blue small">小btn</a> <input class="button blue" type="button" value="Input 元素" /> <button class="button blue">按钮标签</button></div><div class="demo"><a href="#" class="button green">绿色</a> <a href="#" class="button green bigrounded">圆形</a> <a href="#" class="button green medium">中btn</a> <a href="#" class="button green small">小btn</a> <input class="button green" type="button" value="Input 元素" /> <button class="button green">按钮标签</button></div><div class="demo"><a href="#" class="button white">灰白</a> <a href="#" class="button white bigrounded">圆形</a> <a href="#" class="button white medium">中btn</a> <a href="#" class="button white small">小btn</a> <input class="button white" type="button" value="Input 元素" /> <button class="button white">按钮标签</button></div><div class="demo"><a href="#" class="button orange">橘红</a> <a href="#" class="button orange bigrounded">圆形</a> <a href="#" class="button orange medium">中btn</a> <a href="#" class="button orange small">小btn</a> <input class="button orange" type="button" value="Input 元素" /> <button class="button orange">按钮标签</button></div></div></body></html>
