mui預設按鈕為灰色，另外還提供了藍色（blue）、綠色(green)、黃色(yellow)、紅色(red)、紫色(purple)五種色系的按鈕，五種色系對應五種場景，分别為primary、success、warning、danger、royal；使用
.mui-btn
類即可生成一個預設按鈕，繼續添加
.mui-btn-顔色值
或
.mui-btn-場景
可生成對應色系的按鈕，例如：通過
.mui-btn-blue
或
.mui-btn-primary
均可生成藍色按鈕。
1.普通按鈕
在button節點上增加
.mui-btn
類，即可生成預設按鈕；若需要其他顔色的按鈕，則繼續增加對應class即可，比如
.mui-btn-blue
即可變成藍色按鈕
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<script src="js/mui.min.js"></script>
<link href="css/mui.min.css" target="_blank" rel="external nofollow" rel="stylesheet"/>
<script type="text/javascript" charset="utf-8">
mui.init();
</script>
</head>
<body>
<h5>有底色按鈕:</h5>
<button type="button" class="mui-btn">預設</button>
<button type="button" class="mui-btn mui-btn-primary">藍色</button>
<button type="button" class="mui-btn mui-btn-success">綠色</button>
<button type="button" class="mui-btn mui-btn-warning">黃色</button>
<button type="button" class="mui-btn mui-btn-danger">紅色</button>
<h5>無底色按鈕(使用父元素的背景顔色):</h5>
<button type="button" class="mui-btn mui-btn-outlined">預設</button>
<button type="button" class="mui-btn mui-btn-primary mui-btn-outlined">藍色</button>
<button type="button" class="mui-btn mui-btn-success mui-btn-outlined">綠色</button>
<button type="button" class="mui-btn mui-btn-warning mui-btn-outlined">黃色</button>
<button type="button" class="mui-btn mui-btn-danger mui-btn-outlined">紅色</button>
<h5>連結按鈕:</h5>
<button type="button" class="mui-btn mui-btn-link">删除</button>
<h5>預設input标簽樣式:</h5>
<input type="button" value="登入" />
<input type="reset" value="重置" />
<input type="submit" value="送出" /><br />
<button type="button">預設button标簽樣式</button>
</body>
</html>
代碼效果：
2.帶圖示的按鈕
<h5>圖示居左:</h5>
<button type="button" class="mui-btn mui-btn-danger mui-icon mui-icon-home">首頁</button>
<button type="button" class="mui-btn mui-icon mui-icon-search">搜尋</button>
<button type="button" class="mui-btn mui-btn-link mui-icon mui-icon-back">
傳回
</button>
<button type="button" class="mui-btn mui-btn-link">
傳回
<span class="mui-icon mui-icon-forward"></span>
</button>
<h5>圖示居右:</h5>
<button type="button" class="mui-btn mui-btn-danger mui-icon mui-icon-home mui-right">首頁</button>
<button type="button" class="mui-btn mui-icon mui-icon-search mui-right">搜尋</button>
<button type="button" class="mui-btn mui-btn-link">
<span class="mui-icon mui-icon-back">上一步</span>
</button>
<button type="button" class="mui-btn mui-btn-link mui-icon mui-icon-forward mui-right">
下一步
</button>
代碼效果：
3.帶數字的按鈕
顔色被覆寫
<h5>......</h5>
<button type="button" class="mui-btn mui-btn-primary">藍色<span class="mui-badge">1</span></button>
<button type="button" class="mui-btn mui-btn-success">綠色<span class="mui-badge mui-badge-danger">2</span></button>
<button type="button" class="mui-btn mui-btn-warning">黃色<span class="mui-badge mui-badge-warning">3</span></button>
<button type="button" class="mui-btn mui-btn-danger">紅色<span class="mui-badge">4</span></button>
<h5>......</h5>
<button type="button" class="mui-btn mui-btn-primary mui-btn-outlined">藍色<span class="mui-badge mui-badge-danger">6</span></button>
<button type="button" class="mui-btn mui-btn-success mui-btn-outlined">綠色<span class="mui-badge mui-badge-danger">7</span></button>
<button type="button" class="mui-btn mui-btn-warning mui-btn-outlined">黃色<span class="mui-badge mui-badge-warning">8</span></button>
<button type="button" class="mui-btn mui-btn-danger mui-btn-outlined">紅色<span class="mui-badge">9</span></button>
代碼效果：
4.塊級按鈕
<h5>塊級按鈕:</h5>
<button type="button" class="mui-btn mui-btn-block">按鈕1</button>
<button type="button" class="mui-btn mui-btn-block mui-btn-warning">按鈕2</button>
<button type="button" class="mui-btn mui-btn-block mui-btn-success">按鈕3</button>
<button type="button" class="mui-btn mui-btn-block mui-btn-primary">按鈕4</button>
<button type="button" class="mui-btn mui-btn-block mui-btn-danger">按鈕5</button>
<button type="button" class="mui-btn mui-btn-block mui-btn-royal">按鈕6</button>
代碼效果：