CSS3实例——制作精美的按钮

本文主要说明如何用CSS3制作精美的按钮。

效果展示：

一、用HTML代码定义一个链接

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

二、修改CSS3属性

1、修改a标签的显示状态，包括：

（1）以inline-block进行显示；

（2）去除文本装饰（去除下划线）；

（3）修改内边距。

.button {
     display: inline-block;
     text-decoration: none;
     padding:0.8em 2em;
 }

2、装饰按钮，包括：

（1）添加渐变颜色（选择两种相近的颜色）；

（2）修改字体颜色（一般设置为白色）；

（3）添加圆角属性；

（4）设置边界（选择深灰色的边界，不然按钮会显得很突兀）。

     background:linear-gradient(#ddaaff, #d789ff);
     color: #ffffff;
     border-radius: 5px;
     border: 1px solid #9f9f9f;

3、添加伪操作类，实现动态效果（鼠标滑过按钮，点击鼠标时的效果）：

动态效果可以是渐变的两种颜色换过来，或者两种颜色都加深

.button:hover, .button:active {
    background:linear-gradient(#d789ff,#ddaaff);
}