��ѡ��̳

标题: 水晶立体按钮代码 [打印本页]

作者: admin 时间: 2018-2-28 14:25
标题: 水晶立体按钮代码
效果图：
(, 下载次数: 0)

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>

欢迎光临 ��ѡ��̳ (http://www.sunminxuan.cn/bbs/)

����ѡ������̳

��ѡ��̳