通用按钮样式

dabblet.css

/* 通用按钮样式 */


/* reset */
.bn-small,
a.bn-cta,
.bn-cta input,
.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;overflow:hidden;vertical-align:middle;color:#444;
  border-width:1px;border-style:solid;border-color:#bbb #bbb #999;
  -webkit-border-radius:4px;
     -moz-border-radius:4px;
          border-radius:4px;
}


.lnk-flat,
.bn-flat input {
  height: 2.1em;
  padding: 0 1.16em 2px;
  line-height:2.2;*line-height:2.3;
  font-size: 12px;
  cursor: pointer;

  -webkit-border-radius: 3px;
     -moz-border-radius: 3px;
          border-radius: 3px;

  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfcfc', endColorstr='#e9e9e9',GradientType=0 ); /* IE6~9 */
  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);
}


.lnk-flat:hover,
.bn-flat input:hover,
.bn-flat-over {
  color: #333;
  border-color:#999 #999 #666;
  background-color:transparent;
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8f8f8', endColorstr='#dddddd',GradientType=0 ); /* IE6~9 */ 
  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);
}


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


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


/* hot button style */
a.bn-cta,
.bn-cta input
{
  display:inline-block;padding:4px 20px;border:1px solid #528641;background:#3fa156;color:#fff;font-size:14px;letter-spacing:2px;
  *position:relative;*display:inline;zoom:1;*padding:6px 20px 4px;*line-height:1.2;
  -webkit-border-radius:3px;
     -moz-border-radius:3px;
          border-radius:3px;
}

a.bn-cta { vertical-align:middle; }
.bn-cta input { padding:5px 18px;*padding:4px 10px 2px;*vertical-align:middle;/* IE */ }

a.bn-cta:link, a.bn-cta:visited { text-decoration:none;color:#fff; }
.bn-cta input:hover,
a.bn-cta:hover { background-color:#4fca6c;border-color:#6aad54; }
.bn-cta input:active,
a.bn-cta:active { background-color:#3fa156;border-color:#528641; }

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

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


/******************************/
body { width:50%;margin:auto;padding-top:30px; }
.item { margin-bottom:30px; }
.bn-cta { margin-right:2em; }

dabblet.html

<div class="item">
<span class="bn-flat"><input type="submit"></span>
</div>

<div class="item">
<span class="bn-flat"><input type="button" value="取消"></span>
</div>

<div class="item">
<a href="" class="bn-cta">注册</a>
</div>

<div class="item">
  <span class="bn-cta"><input type="submit" value="登录"></span>
  <a href="">取消</a>
</div>

<div class="item">
<a href="" class="bn-small">注册</a>
</div>

settings.json

{"view":"split","seethrough":"","prefixfree":"1","page":"all"}