利用CSS3相关技术实现按钮效果
由于CCS3增加了很多属性，对网页的设计和开发有了更多的可选择性。首先肯定是大热的是圆角border-radius了，其次就是颜色的渐变gradient了，还有就是可能要用到伪对象，下面这个例子就用到了:after了。
颜色的配色大家可以根据自己喜欢的颜色替换。
效果如下：
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
padding:0;
margin:0;
}
#btns {
text-align:center;
margin-top:20px;
}
#btns a {
display:inline-block;
padding:10px 40px;
color:#fff;
background:#090;
background-image:-moz-linear-gradient(#090,#09F);
background-image:-webkit-linear-gradient(#090,#09F);
background-image:-o-linear-gradient(#090,#09F);
background-image:linear-gradient(#090,#09F);
-moz-border-radius:4px;
-webkit-border-radius:4px;
border-radius:4px;
font-weight:bold;
text-decoration:none;
overflow:hidden;
position:relative;
}
#btns a:hover {
background:#096;
background-image:-moz-linear-gradient(#096,#06c);
background-image:-webkit-linear-gradient(#096,#06c);
background-image:-o-linear-gradient(#096,#06c);
background-image:linear-gradient(#096,#06c);
}
#btns a:after {
content:"";
-moz-border-radius:4px 4px 0 0;
-webkit-border-radius:4px 4px 0 0;
border-radius:4px 4px 0 0;
height:50%;
width:100%;
background:#fff;
display:block;
opacity:0.2;
position:absolute;
left:0;
top:0;
}
</style>
</head>
<body>
<div id="btns">
<a href="http://fenav.xh-css.cn">确定</a>
<a href="http://fenav.xh-css.cn">submit</a>
<a href="http://fenav.xh-css.cn">submit</a>
<a href="http://fenav.xh-css.cn">submit</a>
</div>
</body>
</html>
转自：http://www.w3cfuns.com/thread-5592416-1-1.html