按钮
向任意HTML元素设定class=“layui-btn”，建立一个基础按钮。通过追加格式为*layui-btn-{type}*的class来定义其它按钮风格。内置的按钮class可以进行任意组合，从而形成更多种按钮风格。

1. <button type="button" class="layui-btn">一个标准的按钮</button>
   
2. <a href="http://www.layui.com" class="layui-btn">一个可跳转的按钮</a>
   
3. <div class="layui-btn">div按钮</div>

复制代码

主题
原始        class=“layui-btn layui-btn-primary”
默认        class=“layui-btn”
百搭        class=“layui-btn layui-btn-normal”
暖色        class=“layui-btn layui-btn-warm”
警告        class=“layui-btn layui-btn-danger”
禁用        class=“layui-btn layui-btn-disabled”

1. <button class="layui-btn">默认按钮</button>
   
2. <button class="layui-btn layui-btn-primary">原始按钮</button>
   
3. <button class="layui-btn layui-btn-normal">百搭按钮</button>
   
4. <button class="layui-btn layui-btn-warm">暖色按钮</button>
   
5. <button class="layui-btn layui-btn-danger">警告按钮</button>
   
6. <button class="layui-btn layui-btn-disabled">禁用按钮</button>

复制代码

尺寸[color=rgba(0, 0, 0, 0.75)]

尺寸

组合

大型

class=“layui-btn layui-btn-lg”

默认

class=“layui-btn”

小型

class=“layui-btn layui-btn-sm”

迷你

class=“layui-btn layui-btn-xs”

1. <button class="layui-btn layui-btn-normal layui-btn-xs">超小型</button>
   
2. <button class="layui-btn layui-btn-warm layui-btn-sm">小型</button>
   
3. <button class="layui-btn layui-btn-danger layui-btn-normal">默认</button>
   
4. <button class="layui-btn layui-btn-disabled layui-btn-lg">大型</button>

复制代码

圆角

layui-btn-radius

1. <button class="layui-btn layui-btn-radius layui-btn-primary layui-btn-xs">原始超小型圆角按钮</button>
   
2. <button class="layui-btn layui-btn-radius layui-btn-normal layui-btn-sm">百搭小型圆角按钮</button>
   
3. <button class="layui-btn layui-btn-radius layui-btn-warm">暖色正常圆角按钮</button>
   
4. <button class="layui-btn layui-btn-radius layui-btn-danger layui-btn-lg">警告超大型圆角按钮</button>

复制代码

图标

1. <button type="button" class="layui-btn layui-btn-primary">
   
2.     <i class="layui-icon layui-icon-logout layui-font-16"></i> 退出/注销
   
3. </button>
   
4. <button type="button" class="layui-btn layui-btn-normal">
   
5.     <i class="layui-icon layui-icon-home layui-font-16"></i> 主页
   
6. </button>

复制代码