常用按钮样式

以下为css样式

.f-btn{display:inline-block;padding:6px 12px;border:1px solid #ddd;border-radius:4px;background-color:#fff;color:#444;text-align:center;text-decoration:none;font-size:14px;line-height:1.42857143;cursor:pointer}
.f-btn:hover{border-color:#ccc;background-color:#f1f1f1}
.f-btn-lg{padding:10px 16px;border-radius:6px;font-size:18px;line-height:1.3333333}
.f-btn-sm{padding:5px 10px;border-radius:3px;font-size:12px;line-height:1.5}
.f-btn-xs{padding:1px 5px;border-radius:3px;font-size:12px;line-height:1.5}
.f-btn-block{display:block;width:100%}
.f-btn-primary{border-color:#2e6da4;background-color:#337ab7;color:#fff}
.f-btn-primary.focus,.f-btn-primary:focus{border-color:#122b40;background-color:#286090;color:#fff}
.f-btn-primary:hover{border-color:#204d74;background-color:#286090;color:#fff}
.f-btn-success{border-color:#4cae4c;background-color:#5cb85c;color:#fff}
.f-btn-success.focus,.f-btn-success:focus{border-color:#255625;background-color:#449d44;color:#fff}
.f-btn-success:hover{border-color:#398439;background-color:#449d44;color:#fff}
.f-btn-info{border-color:#46b8da;background-color:#5bc0de;color:#fff}
.f-btn-info.focus,.f-btn-info:focus{border-color:#1b6d85;background-color:#31b0d5;color:#fff}
.f-btn-info:hover{border-color:#269abc;background-color:#31b0d5;color:#fff}
.f-btn-warning{border-color:#eea236;background-color:#f0ad4e;color:#fff}
.f-btn-warning.focus,.f-btn-warning:focus{border-color:#985f0d;background-color:#ec971f;color:#fff}
.f-btn-warning:hover{border-color:#d58512;background-color:#ec971f;color:#fff}
.f-btn-danger{border-color:#d43f3a;background-color:#d9534f;color:#fff}
.f-btn-danger.focus,.f-btn-danger:focus{border-color:#761c19;background-color:#c9302c;color:#fff}
.f-btn-danger:hover{border-color:#ac2925;background-color:#c9302c;color:#fff}
.f-btn-disabled,.f-btn-disabled:focus,.f-btn-disabled:hover{border:1px solid #ddd;background-color:#f1f1f1;color:#999;cursor:default}
.f-btn .f-icon{margin-right:4px}

以下为html部分代码

<style>
 /*  演示样式 */
@font-face {
  font-family: 'mcode';
  src: url('//at.alicdn.com/t/font_1460222683_3723075.eot'); /* IE9*/
  src: url('//at.alicdn.com/t/font_1460222683_3723075.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('//at.alicdn.com/t/font_1460222683_3723075.woff') format('woff'), /* chrome、firefox */
  url('//at.alicdn.com/t/font_1460222683_3723075.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
  url('//at.alicdn.com/t/font_1460222683_3723075.svg#iconfont') format('svg'); /* iOS 4.1- */
}                    
.f-icon{font-family: 'mcode';font-style: normal;display: inline-block;}
  
  button{margin: 5px;
  
</style>
<button class="f-btn f-btn-lg f-btn-primary">大按钮</button>
  <button class="f-btn">你好</button>
    <button class="f-btn f-btn-sm f-btn-info">你好</button>
  <button class="f-btn f-btn-sm f-btn-success">你好</button>
    <button class="f-btn f-btn-sm f-btn-warning">你好</button>
    <button class="f-btn f-btn-xs f-btn-danger">小按钮</button>
      <button class="f-btn f-btn-disabled">禁止状态</button>
        <button class="f-btn f-btn-success f-btn-block f-mt10"><i class="f-icon">&#xe619;</i>你好</button>
        <p>图标</p>
          <button class="f-btn f-btn-sm f-btn-success"><i class="f-icon">&#xe619;</i>你好</button>
            <button class="f-btn f-btn-lg f-btn-primary"><i class="f-icon">&#xe618;</i>大按钮</button>
  <button class="f-btn"><i class="f-icon">&#xe61d;</i>你好</button>
    <button class="f-btn f-btn-sm f-btn-info"><i class="f-icon">&#xe618;</i>你好</button>
    <button class="f-btn f-btn-sm f-btn-warning"><i class="f-icon">&#xe618;</i>你好</button>
    <button class="f-btn f-btn-xs f-btn-danger"><i class="f-icon">&#xe618;</i>小按钮</button>