css3怎么做按钮

css3怎么做按钮

今天我给大家介绍一下如何使用CSS3来制作一个圆角阴影、渐变色的漂亮的按钮，它不需要任何图片和javascript脚本，只需要CSS3就可以轻松实现按钮效果，并且可以适用于任意HTML元素，像div，span，p，a，button，input等等。

这些纯CSS代码制作的按钮大小可以根据字体大小自动调整，渐变色背景可以兼容各浏览器，并且有正常、鼠标滑向、点击三种状态样式，当然，如果您的浏览器不支持CSS3，那么按钮将没有圆角和阴影效果。

（推荐学习：CSS视频教程）

CSS3特性

首先我们熟悉下CSS3是如何实现圆角和阴影效果的。

CSS3提供了新的属性如：阴影text-shadow，box-shadow，和圆角border-radius，我们先来看这样一段CSS3代码：

text-shadow: 0 1px 1px rgba(0,0,0,.3); 
box-shadow: 0 1px 2px rgba(0,0,0,.2); 
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2); 
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);

以上代码第一行设置了文字的阴影效果，它的用法结构：X轴偏移量，Y轴偏移量，模糊量，颜色，对于颜色可以使用RGBA模式。

第二行代码设置了边框盒子阴影效果，用法与文字阴影效果一样。

第三行和第四行分别表示在不同浏览器内核下的CSS3用法，-webkit-xxx表示webkit内核，-moz-xxx表示firefox内核。

border-radius用来设置圆角样式，同样有webkit和firefox之分。

border-radius: .5em; 
-webkit-border-radius: .5em; /* for Webkit */ 
-moz-border-radius: .5em;  /* for Firefox */

具体css3按钮样式如下：

.button {
    display: inline-block;
    outline: none;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    font: 16px/100#39;Microsoft yahei', Arial, Helvetica, sans-serif;
    padding: .5em 2em .55em;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
    -webkit-border-radius: .5em;
    -moz-border-radius: .5em;
    border-radius: .5em;
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
    -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
}

.blue {
    color: #d9eef7;
    border: solid 1px #0076a3;
    background: #0095cd;
    background: -webkit-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5));
    background: -moz-linear-gradient(top, #00adee, #0078a5);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00adee', endColorstr='#0078a5');
}

使用：

<a href="#" class="button green">css3按钮</a>

更多CSS相关技术文章，请访问CSS3答疑栏目进行学习！

以上就是css3怎么做按钮的详细内容，更多请关注易知道|edz.cc其它相关文章！