CSS3 Gradients创建无图片水晶按钮

在css中，分别定义buttton、aqua、glare的css属性，.button定义按钮外观，.aqua实现水晶效果，.glare实现辉光效果。

<div class="button aqua">
        <div class="glare"></div>
        Button Label
  </div>

.button{
     width: 120px;
     height: 24px;
    padding: 5px 16px 3px;
    -webkit-border-radius: 16px;
    -moz-border-radius: 16px;
    border: 2px solid #ccc;
    position: relative;
     /* Label */
    font-family: Lucida Sans, Helvetica, sans-serif;
    font-weight: 800;
    color: #fff;
    text-shadow: rgba(10, 10, 10, 0.5) 1px 2px 2px;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.aqua{
        background-color: rgba(60, 132, 198, 0.8);
        border-top-color: #8ba2c1;
        border-right-color: #5890bf;
        border-bottom-color: #4f93ca;
        border-left-color: #768fa5;
       -webkit-box-shadow: rgba(66, 140, 240, 0.5) 0px 10px 16px;
        -moz-box-shadow: rgba(66, 140, 240, 0.5) 0px 10px 16px;
        background-image: -webkit-gradient(linear, 0% 0%, 0% 90%, from(rgba(28, 91, 155, 0.8)), to(rgba(108, 191, 255, .9)));
/* for FF 3.6 */
        background-image: -moz-linear-gradient(rgba(28, 91, 155, 0.8) 0%, rgba(108, 191, 255, .9) 90%);
}
.button .glare {
        position: absolute;
        top: 0;
        left: 5px;
        -webkit-border-radius: 8px;
        -moz-border-radius: 8px;
        height: 1px;
        width: 142px;
        padding: 8px 0;
        background-color: rgba(255, 255, 255, 0.25);
        background-image: -webkit-gradient(linear, 0% 0%, 0% 95%, from(rgba(255, 255, 255, 0.7)), to(rgba(255, 255, 255, 0)));
}