返回顶部

收藏

css实现圆角彩色按钮

更多

如下图片效果:

css button

要实现这个效果,需要下面的样式定义:

<!DOCTYPE html>
<html>
<head>
    <title>css button</title>
</head>
<body>
<style>
    .button-primary,.button-primary:visited .button-primary:hover, a.button-primary:hover {
        background-color: #2ea2cc;
        cursor: pointer;
        font-size: 13px;
        text-decoration: none;
        height: auto;
        line-height: 1;
        padding: .6em 1.2em;
        font-weight: 300;
        border: none;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        -o-border-radius: 3px;
        -ms-border-radius: 3px;
        border-radius: 3px;
        color: #fff;
        text-shadow: 0 -1px 0 rgb(0,116,162);
        background-image: -moz-linear-gradient(top, #2ea2cc 0%, #0074a2 100%);
        background-image: -webkit-linear-gradient(top, #2ea2cc 0%,#0074a2 100%);
        background-image: -o-linear-gradient(top, #2ea2cc 0%,#0074a2 100%);
        background-image: -ms-linear-gradient(top, #2ea2cc 0%,#0074a2 100%);
        background-image: linear-gradient(top, #2ea2cc 0%,#0074a2 100%);
        -moz-box-shadow: inset 0 1px 0 #2ea2cc, inset 0 2px 0 rgba(120,200,230,0.7);
        -webkit-box-shadow: inset 0 1px 0 #2ea2cc, inset 0 2px 0 rgba(120,200,230,0.7);
        -o-box-shadow: inset 0 1px 0 #2ea2cc, inset 0 2px 0 rgba(120,200,230,0.7);
        -ms-box-shadow: inset 0 1px 0 #2ea2cc, inset 0 2px 0 rgba(120,200,230,0.7);
        box-shadow: inset 0 1px 0 #2ea2cc, inset 0 2px 0 rgba(120,200,230,0.7);
    }
</style>

<p>
<a class="button-primary" href="##">BUTTON</a>

<button class="button-primary">BUTTON</button>
</p>
</body>
</html>

标签:css

收藏

0人收藏

支持

0

反对

0

发表评论