按钮 - 页面元素

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

原始按钮 默认按钮 百搭按钮 暖色按钮 警告按钮 禁用按钮

大型按钮 默认按钮 小型按钮 迷你按钮

大型百搭 正常暖色 小型警告 禁用

      
<button class="layui-btn layui-btn-fluid">流体按钮（最大化适应）</button>
      

原始按钮 默认按钮 百搭按钮 暖色按钮 警告按钮 禁用按钮

大型百搭 小型警告 迷你禁用

哈哈哈哈哈，这组合名长得简直没朋友~

 添加 ဂ     

ဂ      ဂ    

<button class="layui-btn">
  <i class="layui-icon">&#xe608;</i> 添加
</button>
 
<button class="layui-btn layui-btn-sm layui-btn-primary">
  <i class="layui-icon">&#x1002;</i>
</button>
      

温馨提示：各种图标字体请移步文档左侧【页面元素 - 图标】阅览

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

<div class="layui-btn-group">
  <button class="layui-btn">增加</button>
  <button class="layui-btn">编辑</button>
  <button class="layui-btn">删除</button>
</div>
      
<div class="layui-btn-group">
  <button class="layui-btn layui-btn-sm">
    <i class="layui-icon">&#xe654;</i>
  </button>
  <button class="layui-btn layui-btn-sm">
    <i class="layui-icon">&#xe642;</i>
  </button>
  <button class="layui-btn layui-btn-sm">
    <i class="layui-icon">&#xe640;</i>
  </button>
  <button class="layui-btn layui-btn-sm">
    <i class="layui-icon">&#xe602;</i>
  </button>
</div>
 
<div class="layui-btn-group">
  <button class="layui-btn layui-btn-primary layui-btn-sm">
    <i class="layui-icon">&#xe654;</i>
  </button>
  <button class="layui-btn layui-btn-primary layui-btn-sm">
    <i class="layui-icon">&#xe642;</i>
  </button>
  <button class="layui-btn layui-btn-primary layui-btn-sm">
    <i class="layui-icon">&#xe640;</i>
  </button>
</div>
      

尽管按钮在同节点并排时会自动拉开间距，但在按钮太多的情况，效果并不是很美好。因为你需要用到按钮容器

你是否发现，主题、尺寸、图标、圆角的交叉组合，可以形成难以计算的按钮种类。另外，你可能最关注的是配色，Layui内置的六种主题的按钮颜色都是业界常用的标准配色，如果他们仍然无法与你的网站契合，那么请先允许我“噗”一声。。。然后你就大胆地自撸一个颜色吧！比如：粉红色或者菊花色（一个有味道的颜色）