纯CSS3打造动态按钮

或许你更青睐于使用jQuery的各种插件来制作自己的按钮，但本文我们将教你如何仅仅使用CSS3来打造精美的按钮。

提示：以下的文字内容主要翻译自http://tympanus.net/codrops/2011/11/07/animated-buttons-with-css3/，如果您对文中的某些技术细节存在疑问，请以原文为准。

CSS3提供了两项新属性，transform和transition。这些属性能够对内容产生一个“变幻”效果，本文所描述的动态按钮，就是基于这项属性的。请注意，CSS3 transition需要现代浏览器的支持，如果您还不清楚各浏览器对该特性的支持情况，请在这里查看：http://caniuse.com/

HTML

HTML非常简单，其中的img标签为按钮的图标。

	$29
	
	Available on the Apple App Store
	

CSS

在CSS当中，我们需要让transition属性被设置在按钮的动态部分上，这样我们才能够在鼠标覆盖在按钮上时产生动态效果。另外，价格的文字我们通过设置opacity属性来将其隐藏；而阴影效果则令按钮更加逼真。

.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: 18px;
    left: 18px;
    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: 13px;
    display: block;
    font-size: 30px;
    text-shadow: 0px -1px 1px #80ab5d;
}
.a-btn-text small{
    display: block;
    font-size: 11px;
    letter-spacing: 1px;
}
.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;
}

当鼠标覆盖于按钮上时，我们将改变阴影和价格的透明度，以此产生按钮被覆盖的效果。注意，我们的主角transform使用了放大效果。

.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;
}

最后，当按钮被按下时，我们再次修改阴影，并且将右侧的图标稍稍放大：

.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);
}

OK，一个动态按钮已经制作完毕了。以上我们仅仅使用了transform属性的放大效果，而在demo中，还有transition效果和transform的其它效果。

查看demo
下载demo