MUI-button（按钮），【有底色按钮】&【无底色、有边框按钮】&【链接按钮】

本文主要介绍【有底色按钮】&【无底色、有边框按钮】&【链接按钮】

mui使用.mui-btn类即可生成一个默认灰色按钮，继续添加.mui-btn-颜色值或.mui-btn-场景可生成对应色系的按钮。

场景和颜色值等同显示效果

mui-btn-primary	mui-btn-blue
mui-btn-success	mui-btn-green
mui-btn-warning	mui-btn-yellow
mui-btn-danger	mui-btn-red
mui-btn-royal	mui-btn-purple

 1、在button节点上增加.mui-btn类，即可生成默认按钮；若需要其他颜色的按钮，则继续增加对应class即可，比如.mui-btn-blue即可变成蓝色按钮，默认按钮有底色

<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>
<button type="button" class="mui-btn mui-btn-royal">紫色</button>

运行效果如下： 

 

2、若希望无底色、有边框的按钮，仅需增加.mui-btn-outlined类即可，代码如下：

<h5 style="margin-top: 10px;">无底色按钮（使用父元素的背景色）：</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>
<button type="button" class="mui-btn mui-btn-royal mui-btn-outlined">高贵</button>

运行效果如下： 

3、 链接按钮，仅需增加.mui-btn-link类即可， 这样点击按钮时，按钮没有边框颜色，如果需要边框颜色，则增加.mui-btn-颜色类即可，代码如下：

<h5 style="margin-top: 15px;">链接按钮：</h5>	
<button type="button" class="mui-btn  mui-btn-link mui-btn-royal">添加</button>

运行效果如下：