不需要图片和js技术。
能够兼容各种浏览器，不兼容opera.
支持三种按钮状态，即正常，悬停和激活。
可以应用到任何html元素。
完全兼容不支持css3的浏览器，若不兼容css3，则显示没有渐变和阴影的普通按钮。
<!doctype html> <html> <head> <meta charset="utf-8"> <title>设计按钮</title> <style type="text/css"> body{ background: #ededed; margin: 30px auto; color: #999; } .button{ /*定义渐变按钮样式*/ display: inline-block; zoom:1; /*zoom和*display都是为了兼容IE7*/ *dispaly:inline; vertical-align: baseline; margin: 0 2px; outline: none; cursor: pointer; text-align: center; text-decoration: none; font: 14px/100% 楷体; 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{ postion: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; } /*设计颜色样式类：黑色风格的按钮*/ /*通过设计不同颜色样式类，可以设计不同风格的按钮效果*/ .black{ /*黑色样式类*/ color: #d7d7d7; border: solid 1px #333; background: #333; background: -WebKit-gradient(linear,left yop,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-gradinet(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-gradinet(top,#000,#444); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000',endColorstr='#444444'); } </style> </head> <body> <div> <a href="#" class="button black">圆角按钮</a> <a href="#" class="button black bigrounded">大号圆角按钮</a> <a href="#" class="button black medium">中号按钮</a> <a href="#" class="button black small">小号按钮</a> </div> </body> </html>
