水晶立体按钮代码

admin

效果图：


html部分
<div class="button aqua">
        <div class="glare"></div>
        珠宝区
</div>

css3部分

<style type="text/css" >
/*新增水晶按钮*/

.button{
        margin-top:5px;
     width: 84px;
     height: 45px;
         line-height:45px;
         float:left; margin-left:3px;
    padding: 5px 16px 3px;
   -webkit-border-radius: 16px;
   -moz-border-radius: 16px;
    border: 1px solid #ccc;
   position: relative;

  font-family: "Microsoft YaHei", "STXiHei","SimHei","SimSun";
   font-weight: normal; font-size:10px;
   color: #333;

   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: #CCC;
       border-right-color: #CCC;
         border-bottom-color: #CCC;
       border-left-color: #CCC;
        -webkit-box-shadow: #888 0px 10px 16px;
       -moz-box-shadow: #888 0px 10px 16px;
        background-image: -webkit-gradient(linear, 0% 0%, 0% 90%, from(#af046c), to(#fff));

      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: 70px;
         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)));
}
</style>