利用CSS3相关技术实现按钮效果

顺晟科技

2021-07-31 07:32:07

112

由于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:;
        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

上一篇：掌握CSS3：一些实用的技巧下一篇：css3实现图片容器内等比缩放

网站建设

Css

利用CSS3相关技术实现按钮效果