css3实现多种颜色的底部阴影按钮特效

css3实现多种颜色的底部阴影按钮特效,鼠标经过按钮,还会出现过渡效果！

非常不错的css3按钮。按钮是一款纯css3实现的膨胀修边阴影背景按钮。

适用浏览器：FireFox、Chrome、Safari、Opera、傲游、搜狗. 不支持IE8、360、世界之窗。

下面代码是一个按钮的代码：

.btn:nth-child(1){
color: #8c3e4a;
border-color: #ed7989;  
box-shadow:inset 0 1px 0 #f9a1b1,0 1px 0 rgba(0,0,0,.2);
background:-webkit-linear-gradient(top,#f78297,#f56c7e); 
background:-moz-linear-gradient(top,#f78297,#f56c7e); 
background:-o-linear-gradient(top,#f78297,#f56c7e); 
background:-ms-linear-gradient(top,#f78297,#f56c7e); 
background:linear-gradient(top,#f78297,#f56c7e); 
}
.btn:nth-child(1):hover{
background:-webkit-linear-gradient(top,#fbacbb,#f4798f); 
background:-moz-linear-gradient(top,#fbacbb,#f4798f); 
background:-o-linear-gradient(top,#fbacbb,#f4798f); 
background:-ms-linear-gradient(top,#fbacbb,#f4798f); 
background:linear-gradient(top,#fbacbb,#f4798f); 
}
.btn:nth-child(1):active{
top:4px;
box-shadow:inset 0 1px 3px #aa2c3d;
background:-webkit-linear-gradient(top,#e15c6d,#e15c6d); 
background:-moz-linear-gradient(top,#e15c6d,#e15c6d); 
background:-o-linear-gradient(top,#e15c6d,#e15c6d); 
background:-ms-linear-gradient(top,#e15c6d,#e15c6d); 
background:linear-gradient(top,#e15c6d,#e15c6d); 
 
}

效果图为：

特效下载地址：http://www.jqshare.com/Divcss/fondone/id/25.html