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

使用CSS 3创建动态按钮

本文介绍如何使用CSS 3来创建各种具有动态效果的按钮。本文示例中的制作关键在于使用CSS 3创建一些链接元素,然后对这些链接元素应用各种不同的样式、鼠标指针停留特效以及链接元素被激活时的特效。为了代码简洁起见,本文中全部省略浏览器供应商前缀的书写。

示例1

在本示例中我们将创建一个尺寸较大的按钮,我们将在其中显示一个图标、一段文字,与右边的一个用于下载免费版商品的链接,当鼠标指针停留在按钮上时,将显示商品价格。

示例运行结果

HTML代码

本示例的HTML代码非常简单,首先创建一个链接a元素,在其中使用img元素显示图标,使用多个span元素来显示按钮中的其他部分。

<a href="#" class="a-btn">
    <span class="a-btn-slide-text">29元</span>
    <img src="images/1.png"/>
    <span class="a-btn-text">苹果商店提供出售</span> 
    <span class="a-btn-icon-right"><span></span></span>
</a>

CSS 3样式代码

在样式代码中,我们需要确保当鼠标指针停留在按钮上时使用一个CSS 3中的transition动画效果。页面打开时我们将商品价格文字设置为透明(opacity样式属性值等于0),同时,我们对链接元素使用盒阴影样式,以美化其视觉效果。

.a-btn{
    background: linear-gradient(top, #a9db80 0%,#96c56f 100%);
    padding-left: 90px;
    padding-right: 105px;
    height: 90px;
    display: inline-block;
    position: relative;
    border: 1px solid #80ab5d;
    box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 
               1px 1px 3px rgba(0,0,0,0.2);
    border-radius: 4px;
    float: left;
    clear: both;
    margin: 10px 0px;
    overflow: hidden;
    transition: box-shadow 0.3s ease-in-out;
}
.a-btn img{
    position: absolute;
    left: 15px;
    top: 13px;
    border: none;
    transition: all 0.3s ease-in-out;
}
.a-btn .a-btn-slide-text{
    position: absolute;
    font-size: 36px;
    top: 22px;
    left: 8px;
    color: #6d954e;
    opacity: 0;
    text-shadow: 0px 1px 1px rgba(255,255,255,0.4);
    transition: opacity 0.2s ease-in-out;
}
.a-btn-text{
    padding-top: 23px;
    display: block;
    font-size: 30px;
    text-shadow: 0px -1px 1px #80ab5d;
}
.a-btn-icon-right{
    position: absolute;
    right: 0px;
    top: 0px;
    height: 100%;
    width: 80px;
    border-left: 1px solid #80ab5d;
    box-shadow: 1px 0px 1px rgba(255,255,255,0.4) inset;
}
.a-btn-icon-right span{
    width: 38px;
    height: 38px;
    opacity: 0.7;
    border-radius: 20px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -20px 0px 0px -20px;
    border: 1px solid rgba(0,0,0,0.5);
    background: #4e5c50 url(images/arrow_down.png) no-repeat center center;
    box-shadow:0px 1px 1px rgba(255,255,255,0.3) inset, 
               0px 1px 2px rgba(255,255,255,0.5);
    transition: all 0.3s ease-in-out;
}

当鼠标指针停留在按钮上时,我们修改其盒阴影的透明度,将价格文字设置为可见((opacity样式属性值等于0.7),同时使左边图标淡出。

.a-btn:hover{
    box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 
               1px 1px 5px rgba(0,0,0,0.4); 
}
.a-btn:hover img{
    transform: scale(10);
    opacity: 0;
}
.a-btn:hover .a-btn-slide-text,
.a-btn:hover .a-btn-icon-right span{
    opacity: 1;
}

当按钮激活时我们使用内嵌(inset)盒阴影样式使按钮呈现出一种下陷效果,同时放大右边的下载图标。

.a-btn:active {
    position:relative;
    top:1px;
    background:#80ab5d;
    box-shadow:1px 1px 2px rgba(0,0,0,0.4) inset;
    border-color: #a9db80;
}
.a-btn:active .a-btn-icon-right span{
    transform: scale(1.4);
}

示例2

第二个示例与第一个示例非常相似,区别仅在于使用了一些不同的特效。

示例运行结果

HTML代码

第二个示例的HTML代码与第一个示例的HTML代码完全相同。

CSS 3样式代码

弟二个示例的CSS 3样式代码也大致与第一个示例的CSS 3样式代码相同,我们只是修改了按钮颜色。另外,我们在鼠标指针停留在按钮上时使用了完全不同的特效,我们将使用动画效果放大价格(其初始尺寸为0)及使(左边的)图标消失,同时使右边向下箭头图标的背景色变为红色。

.a-btn:active {
    position: relative;
    top: 1px;
    background: #5d81ab;
    box-shadow: 1px 1px 2px rgba(0,0,0,0.4) inset;
    border-color: #80a9da;
}
.a-btn:active .a-btn-icon-right span{
    transform: rotate(360deg);
}

示例3

在本示例中,我们将创建一个完全不同的按钮。当鼠标指针停留在按钮上时按钮将向下扩展并且在其中显示一些信息。右边的箭头图标中的箭头方向也会略有旋转。

示例运行结果

HTML代码

本示例中的HTML代码与前两个示例中的HTML代码略有区别。我们将对按钮向下扩展时显示出来的文字使用a-btn-slide-text样式类。

<a href="#" class="a-btn">
    <span class="a-btn-text">注册</span> 
    <span class="a-btn-slide-text">赠送50积分</span> 
    <span class="a-btn-icon-right"><span></span></span>
</a>

CSS 3样式代码

在页面打开时按钮将拥有一个默认高度,当鼠标指针停留在按钮上时,为了显示附加信息,我们需要改变按钮高度,因此我们使用一个动画将a-btn-slide-text样式类(用于显示附加信息的span元素的样式类)从0像素渐变为30像素。

.a-btn{
    background: linear-gradient(top, #feda71 0%,#febb4a 100%);
    border: 1px solid #f5b74e;
    border-color: #f5b74e #e5a73e #d6982f;
    box-shadow: 0 1px 1px #d3d3d3, inset 0 1px 0 #fee395;  
    padding: 0px 80px 0px 10px;
    height: 38px;
    display: inline-block;
    position: relative;
    border-radius: 4px;
    float: left;
    margin: 10px;
    overflow: hidden;
    transition: all 0.3s linear;
}
.a-btn-text{
    padding-top: 5px;
    display: block;
    font-size: 18px;
    white-space: nowrap;
    color: #996633;
    text-shadow: 0 1px 0 #fedd9b;
    transition: all 0.3s linear;
}
.a-btn-slide-text{
    position:absolute;
    top: 35px;
    left: 0px;
    width: auto;
    right: 52px;
    height: 0px;
    background: #fff;
    color: #996633;
    font-size: 13px;
    white-space: nowrap;
    font-family: Georgia, serif;
    font-style: italic;
    overflow: hidden;
    line-height: 30px;
    box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 
                1px 1px 1px rgba(0,0,0,0.5) inset;
    transition: height 0.3s linear;
}
.a-btn-icon-right{
    position: absolute;
    right: 0px;
    top: 0px;
    height: 100%;
    width: 52px;
    border-left: 1px solid #f5b74e;
    box-shadow: 1px 0px 1px rgba(255,255,255,0.4) inset;
}
.a-btn-icon-right span{
    width: 38px;
    height: 38px;
    opacity: 0.7;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -20px 0px 0px -20px;
    background: transparent url(images/arrow_right.png) no-repeat 50% 55%;
    transition: all 0.3s linear;
}

当鼠标指针停留在按钮上时,我们需要改变按钮高度及其内部用于显示附加信息的span元素的高度,同时将箭头图标旋转45度。

.a-btn:hover{
    height: 65px;
    box-shadow: 0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 5px rgba(0,0,0,0.4); 
}
.a-btn:hover .a-btn-text{
    text-shadow: 0px 1px 1px rgba(0,0,0,0.2);
    color: #fff;
}
.a-btn:hover .a-btn-slide-text{
    height: 30px;
}
.a-btn:hover .a-btn-icon-right span{
    opacity: 1;
    transform: rotate(-45deg);
}

当按钮被激活时,我们需要稍微移动一下按钮、同时修改按钮背景色,使其呈现出一种被按下的效果。

.a-btn:active {
    position:relative;
    top:1px;
    background: linear-gradient(top, #fec354 0%,#fecd61 100%); /* W3C */
    border-color: #d29a3a #cc9436 #c89133;
    text-shadow: 0 1px 0 #fee1a0;
    box-shadow: 0 1px 1px #d4d4d4, inset 0 1px 0 #fed17e;  
}

示例4

在本示例中,我们将创建一个完全不同的按钮。当鼠标指针停留在按钮上时按钮将向下扩展并且在其中显示一些信息。右边的箭头图标中的箭头方向也会略有旋转。

示例运行结果

HTML代码

本示例的HTML代码与上一个(示例3)的HTML代码完全相同。

CSS 3样式代码

本示例的CSS 3样式代码也大致与上一个(示例3)的CSS 3样式代码相同,我们只是修改了按钮颜色与附加信息文字的位置。

.a-btn{
    background: linear-gradient(top, #80a9da 0%,#6f97c5 100%);
    padding-left: 20px;
    padding-right: 80px;
    height: 38px;
    display: inline-block;
    position: relative;
    border: 1px solid #5d81ab;
    box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 
               1px 1px 3px rgba(0,0,0,0.2), 
               0px 0px 0px 4px rgba(188,188,188,0.5);
    border-radius: 20px;
    float: left;
    clear: both;
    margin: 10px 0px;
    overflow: hidden;
    transition: all 0.3s linear;
}
.a-btn-text{
    padding-top: 5px;
    display: block;
    font-size: 18px;
    white-space: nowrap;
    text-shadow: 0px 1px 1px rgba(255,255,255,0.3);
    color: #446388;
    transition: all 0.2s linear;
}
.a-btn-slide-text{
    position:absolute;
    height: 100%;
    top: 0px;
    right: 52px;
    width: 0px;
    background: #63707e;
    text-shadow: 0px -1px 1px #363f49;
    color: #fff;
    font-size: 18px;
    white-space: nowrap;
    text-transform: uppercase;
    text-align: left;
    text-indent: 10px;
    overflow: hidden;
    line-height: 38px;
    box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 
                1px 1px 2px rgba(0,0,0,0.2) inset;
    transition: width 0.3s linear;
}
.a-btn-icon-right{
    position: absolute;
    right: 0px;
    top: 0px;
    height: 100%;
    width: 52px;
    border-left: 1px solid #5d81ab;
    box-shadow: 1px 0px 1px rgba(255,255,255,0.4) inset;
}
.a-btn-icon-right span{
    width: 38px;
    height: 38px;
    opacity: 0.7;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -20px 0px 0px -20px;
    background: transparent url(images/arrow_right.png) no-repeat 50% 55%;
    transition: all 0.3s linear;
}

当鼠标指针停留在按钮上时我们增加按钮的右边距及用于显示附加信息的span元素的宽度。

.a-btn:hover{
    padding-right: 180px;
    box-shadow: 0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2);
}
.a-btn:hover .a-btn-text{
    text-shadow: 0px 1px 1px #5d81ab;
    color: #fff;
}
.a-btn:hover .a-btn-slide-text{
    width: 100px;
}
.a-btn:hover .a-btn-icon-right span{
    opacity: 1;
}

当按钮被按下时我们同样通过内嵌阴影使其呈现出下限效果。

.a-btn:active {
    position: relative;
    top: 1px;
    background: #5d81ab;
    box-shadow: 1px 1px 2px rgba(0,0,0,0.4) inset;
    border-color: #80a9da;
}