{"result":[{"aid":"488","catid":"20","username":"admin","title":"\u7eafCSS3\u52a8\u753b\u6309\u94ae\u6548\u679c,\u53ef\u7528\u4e8e\u79fb\u52a8wap app\u5f00\u53d1","author":"","summary":"\u8fd9\u6b21\u6211\u4eec\u8981\u6765\u5206\u4eab\u4e00\u6b3e\u5f88\u4e0d\u9519\u7684CSS3\u6309\u94ae\u52a8\u753b\uff0c\u8fd9\u6b3eCSS3\u6309\u94ae\u4e00\u5171\u67095\u79cd\u52a8\u753b\u65b9\u5f0f\uff0c\u6bcf\u4e00\u79cd\u90fd\u662f\u9f20\u6807\u6ed1\u8fc7\u52a8\u753b\u5f62\u5f0f\uff0c\u867d\u7136\u8fd9\u4e9b\u52a8\u753b\u6309\u94ae\u4e0d\u662f\u5341\u5206\u534e\u4e3d\uff0c\u4f46\u662f\u5c0f\u7f16\u89c9\u5f97\u4e0d\u50cf\u5176\u4ed6\u6309\u94ae\u90a3\u6837\u5f88\u96be\u6269\u5c55\uff0c\u6211\u4eec\u53ef\u4ee5\u4fee\u6539CSS\u4ee3\u7801\u968f\u610f\u6539\u53d8\u81ea\u5df1 ...","pic":"portal\/201603\/09\/202742r1kngyt17na7n1nk.jpg","content":"\u7eafCSS3\u52a8\u753b\u6309\u94ae\u6548\u679c,\u53ef\u7528\u4e8e\u79fb\u52a8wap app\u5f00\u53d1\uff0c\u662f\u4e0d\u662f\u7889\u5821\u4e86<\/font>

\u8fd9\u6b21\u6211\u4eec\u8981\u6765\u5206\u4eab\u4e00\u6b3e\u5f88\u4e0d\u9519\u7684CSS3\u6309\u94ae\u52a8\u753b\uff0c\u8fd9\u6b3eCSS3\u6309\u94ae\u4e00\u5171\u67095\u79cd\u52a8\u753b\u65b9\u5f0f\uff0c\u6bcf\u4e00\u79cd\u90fd\u662f\u9f20\u6807\u6ed1\u8fc7\u52a8\u753b\u5f62\u5f0f\uff0c\u867d\u7136\u8fd9\u4e9b\u52a8\u753b\u6309\u94ae\u4e0d\u662f\u5341\u5206\u534e\u4e3d\uff0c\u4f46\u662f\u5c0f\u7f16\u89c9\u5f97\u4e0d\u50cf\u5176\u4ed6\u6309\u94ae\u90a3\u6837\u5f88\u96be\u6269\u5c55\uff0c\u6211\u4eec\u53ef\u4ee5\u4fee\u6539CSS\u4ee3\u7801\u968f\u610f\u6539\u53d8\u81ea\u5df1\u559c\u6b22\u7684\u989c\u8272\u6837\u5f0f\u3002


<\/font>\u6f14\u793a\u5730\u5740\uff1ahttp:\/\/www.ionic.wang\/thems\/cssbutton\/index.html<\/a>
<\/font>
<\/b>
\u4e0b\u8f7d\u5730\u5740\uff1a\u70b9\u51fb\u4e0b\u8f7d<\/a>

<\/b><\/font><\/a><\/b>

<\/a><\/p>

html\u4ee3\u7801<\/font><\/b>
<\/p>


<\/p>

<div class=\"button01\">
      <a href=\"#\">Download<\/a>
      <p class=\"top\">click to begin<\/p>
      <p class=\"bottom\">1.2MB .zip<\/p>
<\/div>
<\/p>


<\/p>


<\/p>

css\u4ee3\u7801<\/b><\/font>
<\/p>

.button01 {
  width: 200px;
  margin: 50px auto 20px auto;
}

.button01 a {
  display: block;
  height: 50px;
  width: 200px;

  \/*TYPE*\/
  color: white;
  font: 17px\/50px Helvetica, Verdana, sans-serif;
  text-decoration: none;
  text-align: center;
  text-transform: uppercase;

  \/*GRADIENT*\/ 
  background: #00b7ea; \/* Old browsers *\/
  background: -moz-linear-gradient(top, #00b7ea 0%, #009ec3 100%); \/* FF3.6+ *\/
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00b7ea), color-stop(100%,#009ec3)); \/* Chrome,Safari4+ *\/
  background: -webkit-linear-gradient(top, #00b7ea 0%,#009ec3 100%); \/* Chrome10+,Safari5.1+ *\/
  background: -o-linear-gradient(top, #00b7ea 0%,#009ec3 100%); \/* Opera 11.10+ *\/
  background: -ms-linear-gradient(top, #00b7ea 0%,#009ec3 100%); \/* IE10+ *\/
  background: linear-gradient(top, #00b7ea 0%,#009ec3 100%); \/* W3C *\/
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b7ea', endColorstr='#009ec3',GradientType=0 ); \/* IE6-9 *\/
}

.button01 a, p {
    -webkit-border-radius: 10px;
     -moz-border-radius: 10px;
          border-radius: 10px;

  -webkit-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
     -moz-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
          box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
}

p {
  background: #222;
  display: block;
  height: 40px;
  width: 180px;
  margin: -50px 0 0 10px;

  \/*TYPE*\/
  text-align: center;
  font: 12px\/45px Helvetica, Verdana, sans-serif;
  color: #fff;

  \/*POSITION*\/
  position: absolute;
  z-index: -1;

  \/*TRANSITION*\/ 
  -webkit-transition: margin 0.5s ease;
     -moz-transition: margin 0.5s ease;
       -o-transition: margin 0.5s ease;
      -ms-transition: margin 0.5s ease;
          transition: margin 0.5s ease;
}

\/*HOVER*\/
.button01:hover .bottom {
  margin: -10px 0 0 10px;
}

.button01:hover .top {
  margin: -80px 0 0 10px;
  line-height: 35px;
}

\/*ACTIVE*\/
.button01 a:active {
      background: #00b7ea; \/* Old browsers *\/
      background: -moz-linear-gradient(top,  #00b7ea 36%, #009ec3 100%); \/* FF3.6+ *\/
      background: -webkit-gradient(linear, left top, left bottom, color-stop(36%,#00b7ea), color-stop(100%,#009ec3)); \/* Chrome,Safari4+ *\/
      background: -webkit-linear-gradient(top,  #00b7ea 36%,#009ec3 100%); \/* Chrome10+,Safari5.1+ *\/
      background: -o-linear-gradient(top,  #00b7ea 36%,#009ec3 100%); \/* Opera 11.10+ *\/
      background: -ms-linear-gradient(top,  #00b7ea 36%,#009ec3 100%); \/* IE10+ *\/
      background: linear-gradient(top,  #00b7ea 36%,#009ec3 100%); \/* W3C *\/
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b7ea', endColorstr='#009ec3',GradientType=0 ); \/* IE6-9 *\/

}

.button01:active .bottom {
  margin: -20px 0 0 10px;
}

.button01:active .top {
  margin: -70px 0 0 10px;
}
<\/p>


<\/a><\/p>
"}]}