An_css渐变

body 里的div

<div class="test">
    <a href="#" class="aLink">
        <span class="txt">￥29</span>
        ![](img/01.png)
        <span class="txt2">
            <span>this is a demo</span>
            Apple
        </span>
        <span class="btn">
            <span></span>
        </span>
    </a>
</div>

css样式

@charset "utf-8";
/* CSS*/
*{margin:0; padding:0; font-size:12px; font-family:Verdana;}
img{border:none;}
body{
    background:url(img/stucco.png);
}
.test{
    width:320px;
    height:90px;
    margin:30px auto;
    background:-webkit-linear-gradient(top , #A9DB80 0%, #96C56F 100%);
    background:-moz-linear-gradient(top , #A9DB80 0%, #96C56F 100%);
    background:-ms-linear-gradient(top , #A9DB80 0%, #96C56F 100%);
    background:-o-linear-gradient(top , #A9DB80 0%, #96C56F 100%);
    background:#A9DB80;
    box-shadow:0 0 3px #999;
    border-radius:3px;
    transition:1s all ease;
    -webkit-transition:0.5s all ease;
    -moz-transition:0.5s all ease;
    -ms-transition:0.5s all ease;
    -o-transition:0.5s all ease;
    overflow:hidden;
}
.test .aLink{
    display:block;
    width:318px;
    height:88px;
    background:-webkit-linear-gradient(center top , #FFF 2%);
    background:-moz-linear-gradient(center top , #FFF 2%);
    background:-ms-linear-gradient(center top , #FFF 2%);
    background:-o-linear-gradient(center top , #FFF 2%);
    box-shadow:0 1px 1px rgba(255, 255, 255, 0.8) inset, 1px 1px 3px rgba(0, 0, 0, 0.2);
    border-radius:3px;
    -webkit-border-radius:3px;
    -ms-border-radius:3px;
    position:relative;
    text-decoration:none;
    border:#484848 solid 1px;
    overflow:hidden;

}
.test .aLink .txt{
    position:absolute;
    font-size:28px;
    color:#6D954E;
    left:18px;
    top:26px;
    opacity:0;
    -webkit-transition:0.2s all ease;
    -moz-transition:0.2s all ease;
    -ms-transition:0.2s all ease;
    -o-transition:0.2s all ease;
    transition:0.2s all ease;
}
.test .aLink .img{
    position:absolute;
    width:70px;
    height:70px;
    display:block;
    z-index:2;
    top:12px;
    left:10px;
    -webkit-transition:0.2s all ease;
    -moz-transition:0.2s all ease;
    -ms-transition:0.2s all ease;
    -o-transition:0.2s all ease;
    transition:0.2s all ease;
}
.test .aLink .txt2{
    font-size:32px;
    color:#FFF;
    width:140px;
    overflow:hidden;
    display:block;
    text-shadow:0 0 2px #999999;
    position:absolute;
    left:80px;
    text-align:center;
    top:10px;
    font-family:"Comic Sans MS", cursive;
}
.test .aLink .txt2 span{
    font-size:14px;
    color:#FFF;
    display:block;
}
.test .aLink .btn{
    width:80px;
    display:block;
    height:88px;
    position:absolute;
    right:0;
    top:0;
    border-left:#484848 solid 1px;
    box-shadow:inset 1px 0px 2px -1px rgba(255, 255, 255, 1);
    -webkit-box-shadow:inset 1px 0px 2px -1px rgba(255, 255, 255, 1);
    -ms-box-shadow:inset 1px 0px 2px -1px rgba(255, 255, 255, 1);
    -moz-box-shadow:inset 1px 0px 2px -1px rgba(255, 255, 255, 1);
    -o-box-shadow:inset 1px 0px 2px -1px rgba(255, 255, 255, 1);
}
.test .aLink .btn span{
    display:block;
    width:40px;
    height:40px;
    background:url(img/arrow_down.png) center center no-repeat #333;
    margin:24px auto;
    border-radius:50%;
    -webkit-transition:0.3s all ease;
    -moz-transition:0.3s all ease;
    -ms-transition:0.3s all ease;
    -o-transition:0.3s all ease;
}

/*动画*/
.test:hover{
    box-shadow:0 0 10px #666;
    box-shadow:0 0 10px #666;
}
.test:hover .img{
    width:150px;
    height:150px;
    left:-26px;
    top:-30px;
    opacity:0;
}
.test:hover .txt{
    opacity:1;
}

.test:active{
    box-shadow:0 0 0px #999;
    background:-webkit-linear-gradient(top , #80ab5d 0%, #80ab5d 100%);
    background:-moz-linear-gradient(top , #80ab5d 0%, #80ab5d 100%);
    background:-ms-linear-gradient(top , #80ab5d 0%, #80ab5d 100%);
    background:-o-linear-gradient(top , #80ab5d 0%, #80ab5d 100%);
}
.test:active .aLink{
    box-shadow:inset 2px 2px 3px #666666;
}
.test:active .btn{
    box-shadow:inset 1px 1px 1px #666666;
    box-shadow:inset 1px 1px 1px #666666);
}
.test:active .txt{
    color:#A9DB80;
}
.test:active .btn span{
    width:60px;
    height:60px;
    margin-top:15px;
    background-size:60%;
}