本网站只能被运行在支持JavaScript脚本的环境中

使用CSS 3制作按钮

本文介绍如何只通过a元素与强大的CSS 3来制作各种美丽的按钮。为了代码简短起见,本文中的代码均不使用浏览器供应商前缀。

所有这些按钮都是由一个a元素所构成,该元素的HTML代码如下所示:

<a class="a_demo_one" href="#">
     点击我!
</a>

示例1

示例运行结果

点击我!

CSS代码

这可以说是本文中最简单的一个示例按钮,其CSS 3样式代码如下所示:

.a_demo_one {
    background-color:#ba2323;
    padding:10px;
    position:relative;
    font-family: 'Open Sans', sans-serif;
    font-size:12px;
    text-decoration:none;
    color:#fff;
    border: solid 1px #831212;
    background-image: linear-gradient(bottom, rgb(171,27,27) 0%, rgb(212,51,51) 100%);
    border-radius: 5px;
}

示例2

示例运行结果

点击我!

CSS代码

这是一个略为复杂一些的按钮,带有一些阴影效果,点击按钮时按钮呈现下陷效果。其样式代码如下所示。

.a_demo_two {
    background-color:#6fba26;
    padding:10px;
    position:relative;
    font-size:12px;
    text-decoration:none;
    color:#fff;
    background-image: linear-gradient(bottom, rgb(100,170,30) 0%, rgb(129,212,51) 100%);
    box-shadow: inset 0px 1px 0px #7fd2f1, 0px 6px 0px #156785;
    border-radius: 5px;
}
.a_demo_two:active {
    top:7px;
    background-image: linear-gradient(bottom, rgb(100,170,30) 100%, rgb(129,212,51) 0%);
    box-shadow: inset 0px 1px 0px #b2f17f, inset 0px -1px 0px #3d6f0d;
    color: #156785;
    text-shadow: 0px 1px 1px rgba(255,255,255,0.3);
    background: rgb(44,160,202);
}

示例3

示例运行结果

点击我!

CSS代码

这一次,我们在按钮中加入图标,其CSS 3样式代码如下所示。

.a_demo_four {
    background-color:#4b3f39;
    font-family: 'Open Sans', sans-serif;
    font-size:12px;
    text-decoration:none;
    color:#fff;
    position:relative;
    padding:10px 20px;
    padding-right:50px;
    background-image: linear-gradient(bottom, rgb(62,51,46) 0%, rgb(101,86,78) 100%);
    border-radius: 5px;
    box-shadow: inset 0px 1px 0px #9e8d84, 0px 5px 0px 0px #322620, 0px 10px 5px #999;
}
 
.a_demo_four:active {
    top:3px;
    background-image: linear-gradient(bottom, rgb(62,51,46) 100%, rgb(101,86,78) 0%);
    box-shadow: inset 0px 1px 0px #9e8d84, 0px 2px 0px 0px #322620, 0px 5px 3px #999;
}
 
.a_demo_four::before {
    background-color:#322620;
    background-image:url(right_arrow.png);
    background-repeat:no-repeat;
    background-position:center center;
    content:"";
    width:20px;
    height:20px;
    position:absolute;
    right:15px;
    top:50%;
    margin-top:-9px;
    border-radius: 50%;
    box-shadow: inset 0px 1px 0px #19120f, 0px 1px 0px #827066;
}
 
.a_demo_four:active::before {
    top:50%;
    margin-top:-12px;
    box-shadow: inset 0px 1px 0px #827066, 0px 3px 0px #19120f, 0px 6px 3px #382e29;
}