通用按钮样式

dabblet.css

@import url(http://img3.douban.com/css/packed_douban7774204613.css);



/* 通用按钮样式 */

/* reset */
.bn-small,
.bn-cta,
.bn-flat input { margin:0;border:none;background:transparent;cursor:pointer;-webkit-appearance: none; }

.lnk-flat,
.bn-flat { display:inline-block;*display:inline;zoom:1;border-width:1px;border-style:solid;border-color:#bbb #bbb #999;
  -moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;
  overflow:hidden;vertical-align:middle;color:#444; }


.lnk-flat,
.bn-flat input {
  height: 2.1em;
  padding: 0 1.16em;
  cursor: pointer; 
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  font-size: 12px;
  line-height:2.3;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#fcfcfc), to(#e9e9e9)); /* Saf4+, Chrome */
  background-image: -webkit-linear-gradient(top, #fcfcfc, #e9e9e9); /* Chrome 10+, Saf5.1+, iOS 5+ */
  background-image: -moz-linear-gradient(top, #fcfcfc, #e9e9e9); /* FF3.6 */
  background-image: -ms-linear-gradient(top, #fcfcfc, #e9e9e9); /* IE10 */
  background-image: -o-linear-gradient(top, #fcfcfc, #e9e9e9); /* Opera 11.10+ */
  background-image: linear-gradient(top, #fcfcfc, #e9e9e9);

  /* for ie 6,7,8,9 background:transparent url(/pics/site/sp_all_2.png) repeat-x 0 -700px\9; */
}



.ua-ie6 .bn-flat, 
.ua-ie7 .bn-flat, 
.ua-ie8 .bn-flat, 
.ua-ie9 .bn-flat, 
.ua-ie6 .lnk-flat, 
.ua-ie7 .lnk-flat, 
.ua-ie8 .lnk-flat, 
.ua-ie9 .lnk-flat { background:transparent url(/pics/site/sp_all_2.png) repeat-x 0 -700px; } 


.lnk-flat:hover,
.bn-flat input:hover,
.bn-flat-over {
  color: #333;
  border-color:#999 #999 #666;
  background-color:transparent;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#f8f8f8), to(#ddd)); /* Saf4+, Chrome */
  background-image: -webkit-linear-gradient(top, #f8f8f8, #ddd); /* Chrome 10+, Saf5.1+, iOS 5+ */
  background-image: -moz-linear-gradient(top, #f8f8f8, #ddd); /* FF3.6 */
  background-image: -ms-linear-gradient(top, #f8f8f8, #ddd); /* IE10 */
  background-image: -o-linear-gradient(top, #f8f8f8, #ddd); /* Opera 11.10+ */
  background-image: linear-gradient(top, #f8f8f8, #ddd);
  /* background-position: 1px -706px\9; */
}

.ua-ie6 .lnk-flat:hover,
.ua-ie7 .lnk-flat:hover,
.ua-ie8 .lnk-flat:hover,
.ua-ie9 .lnk-flat:hover,
.ui-ie6 .lnk-flat:active,
.ui-ie7 .lnk-flat:active,
.ui-ie8 .lnk-flat:active,
.ui-ie9 .lnk-flat:active,
.ua-ie6 .bn-flat input:hover, 
.ua-ie7 .bn-flat input:hover, 
.ua-ie8 .bn-flat input:hover, 
.ua-ie9 .bn-flat input:hover, 
.ua-ie6 .bn-flat-over, 
.ua-ie7 .bn-flat-over, 
.ua-ie8 .bn-flat-over, 
.ua-ie9 .bn-flat-over { background-position: 1px -706px; }


.lnk-flat:active,
.bn-flat input:active,
.bn-flat-active input { background:#ddd;color:#333;border-color:#999 #999 #666; }

/* link button style */
.lnk-flat { line-height:2.2em; }
.lnk-flat:link, .lnk-flat:visited { text-decoration:none; }

/* hot button style */
.bn-cta { color:#ffffff;background:#3fa156;border:1px solid #528641;font-size:14px;padding:6px 20px;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px; *width:100px;*height:30px; }
.bn-cta:hover { background-color:#4fca6c;border-color:#6aad54; } 
.bn-cta:active { background-color:#3fa156;border-color:#528641; } 

.bn-small { background:#ffdddd;border:1px solid #ffabab;color:#ff7676;-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;-webkit-appearance:none;height:1.5em\9;padding:0 2px;line-height:1.56;*line-height:1.4;*position:relative; }

a.bn-small:link, a.bn-small:visited, a.bn-small:hover, a.bn-small:active { background:#ffdddd;color:#ff7676;padding:0 4px;line-height:1.8;font-size:12px;*line-height:1.3;zoom:1;*height:13px;*overflow:hidden; }


/* other */
.recsubmit .bn-flat { margin:0 10px; }

dabblet.html

<div style="width:50%;margin:100px;auto;">
  <p>
  <a href="" class="lnk-flat">测试</a>
  </p>



  <p>
  <input type="button" value="测试" class="bn-cta"> 
  </p>
  
  
  <p>
  <span class="bn-flat"><input type="button" value="测试"></span>
  </p>


  <p>
  <input type="button" value="测试" class="bn-small"> <br>
  <a href="" class="bn-small">测试</a>
  </p>

settings.json

{"page":"css","view":"split"}