不需要图片和js技术。
能够兼容各种浏览器，不兼容opera.
支持三种按钮状态，即正常，悬停和激活。
可以应用到任何html元素。
完全兼容不支持css3的浏览器，若不兼容css3，则显示没有渐变和阴影的普通按钮。
代码语言：javascript复制<!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>
