炫意html5
最早CSS3和HTML5移动技术网站之一

利用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

炫意HTML5 » 利用CSS3相关技术实现按钮效果

CSS3教程HTML5教程