常用按钮样式

以下为css样式

 1 .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}
 2 .f-btn:hover{border-color:#ccc;background-color:#f1f1f1}
 3 .f-btn-lg{padding:10px 16px;border-radius:6px;font-size:18px;line-height:1.3333333}
 4 .f-btn-sm{padding:5px 10px;border-radius:3px;font-size:12px;line-height:1.5}
 5 .f-btn-xs{padding:1px 5px;border-radius:3px;font-size:12px;line-height:1.5}
 6 .f-btn-block{display:block;width:100%}
 7 .f-btn-primary{border-color:#2e6da4;background-color:#337ab7;color:#fff}
 8 .f-btn-primary.focus,.f-btn-primary:focus{border-color:#122b40;background-color:#286090;color:#fff}
 9 .f-btn-primary:hover{border-color:#204d74;background-color:#286090;color:#fff}
10 .f-btn-success{border-color:#4cae4c;background-color:#5cb85c;color:#fff}
11 .f-btn-success.focus,.f-btn-success:focus{border-color:#255625;background-color:#449d44;color:#fff}
12 .f-btn-success:hover{border-color:#398439;background-color:#449d44;color:#fff}
13 .f-btn-info{border-color:#46b8da;background-color:#5bc0de;color:#fff}
14 .f-btn-info.focus,.f-btn-info:focus{border-color:#1b6d85;background-color:#31b0d5;color:#fff}
15 .f-btn-info:hover{border-color:#269abc;background-color:#31b0d5;color:#fff}
16 .f-btn-warning{border-color:#eea236;background-color:#f0ad4e;color:#fff}
17 .f-btn-warning.focus,.f-btn-warning:focus{border-color:#985f0d;background-color:#ec971f;color:#fff}
18 .f-btn-warning:hover{border-color:#d58512;background-color:#ec971f;color:#fff}
19 .f-btn-danger{border-color:#d43f3a;background-color:#d9534f;color:#fff}
20 .f-btn-danger.focus,.f-btn-danger:focus{border-color:#761c19;background-color:#c9302c;color:#fff}
21 .f-btn-danger:hover{border-color:#ac2925;background-color:#c9302c;color:#fff}
22 .f-btn-disabled,.f-btn-disabled:focus,.f-btn-disabled:hover{border:1px solid #ddd;background-color:#f1f1f1;color:#999;cursor:default}
23 .f-btn .f-icon{margin-right:4px}

以下为html部分代码

 1 <style>
 2  /*  演示样式 */
 3 @font-face {
 4   font-family: ‘mcode‘;
 5   src: url(‘//at.alicdn.com/t/font_1460222683_3723075.eot‘); /* IE9*/
 6   src: url(‘//at.alicdn.com/t/font_1460222683_3723075.eot?#iefix‘) format(‘embedded-opentype‘), /* IE6-IE8 */
 7   url(‘//at.alicdn.com/t/font_1460222683_3723075.woff‘) format(‘woff‘), /* chrome、firefox */
 8   url(‘//at.alicdn.com/t/font_1460222683_3723075.ttf‘) format(‘truetype‘), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
 9   url(‘//at.alicdn.com/t/font_1460222683_3723075.svg#iconfont‘) format(‘svg‘); /* iOS 4.1- */
10 }
11 .f-icon{font-family: ‘mcode‘;font-style: normal;display: inline-block;}
12
13   button{margin: 5px;
14
15 </style>
16 <button class="f-btn f-btn-lg f-btn-primary">大按钮</button>
17   <button class="f-btn">你好</button>
18     <button class="f-btn f-btn-sm f-btn-info">你好</button>
19   <button class="f-btn f-btn-sm f-btn-success">你好</button>
20     <button class="f-btn f-btn-sm f-btn-warning">你好</button>
21     <button class="f-btn f-btn-xs f-btn-danger">小按钮</button>
22       <button class="f-btn f-btn-disabled">禁止状态</button>
23         <button class="f-btn f-btn-success f-btn-block f-mt10"><i class="f-icon"></i>你好</button>
24         <p>图标</p>
25           <button class="f-btn f-btn-sm f-btn-success"><i class="f-icon"></i>你好</button>
26             <button class="f-btn f-btn-lg f-btn-primary"><i class="f-icon"></i>大按钮</button>
27   <button class="f-btn"><i class="f-icon"></i>你好</button>
28     <button class="f-btn f-btn-sm f-btn-info"><i class="f-icon"></i>你好</button>
29     <button class="f-btn f-btn-sm f-btn-warning"><i class="f-icon"></i>你好</button>
30     <button class="f-btn f-btn-xs f-btn-danger"><i class="f-icon"></i>小按钮</button>