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

<button type="button" class="layui-btn">一个标准的按钮</button>
<a href="/2.7" class="layui-btn">一个可跳转的按钮</a>

主题

Layui官网—按钮 - 页面元素_HTML

名称

组合

原始

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"

按钮组

将按钮放入一个class="layui-btn-group"元素中，即可形成按钮组，按钮本身仍然可以随意搭配

Layui官网—按钮 - 页面元素_HTML_02

<div class="layui-btn-group">
  <button type="button" class="layui-btn">增加</button>
  <button type="button" class="layui-btn">编辑</button>
  <button type="button" class="layui-btn">删除</button>
</div>
      
<div class="layui-btn-group">
  <button type="button" class="layui-btn layui-btn-sm">
    <i class="layui-icon"></i>
  </button>
  <button type="button" class="layui-btn layui-btn-sm">
    <i class="layui-icon"></i>
  </button>
  <button type="button" class="layui-btn layui-btn-sm">
    <i class="layui-icon"></i>
  </button>
  <button type="button" class="layui-btn layui-btn-sm">
    <i class="layui-icon"></i>
  </button>
</div>
 
<div class="layui-btn-group">
  <button type="button" class="layui-btn layui-btn-primary layui-btn-sm">
    <i class="layui-icon"></i>
  </button>
  <button type="button" class="layui-btn layui-btn-primary layui-btn-sm">
    <i class="layui-icon"></i>
  </button>
  <button type="button" class="layui-btn layui-btn-primary layui-btn-sm">
    <i class="layui-icon"></i>
  </button>
</div>