以下为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>