按钮 - 页面元素

向任意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.

主题

按钮 button 组 - 图1

名称组合
原始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”

尺寸

按钮 button 组 - 图2

尺寸组合
大型class=”layui-btn layui-btn-lg”
默认class=”layui-btn”
小型class=”layui-btn layui-btn-sm”
迷你class=”layui-btn layui-btn-xs”

按钮 button 组 - 图3

尺寸组合
大型百搭class=”layui-btn layui-btn-lg layui-btn-normal”
正常暖色class=”layui-btn layui-btn-warm”
小型警告class=”layui-btn layui-btn-sm layui-btn-danger”
迷你禁用class=”layui-btn layui-btn-xs layui-btn-disabled”

按钮 button 组 - 图4

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

圆角

按钮 button 组 - 图5

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

按钮 button 组 - 图6

尺寸组合
大型百搭class=”layui-btn layui-btn-lg layui-btn-radius layui-btn-normal”
小型警告class=”layui-btn layui-btn-sm layui-btn-radius layui-btn-danger”
迷你禁用class=”layui-btn layui-btn-xs layui-btn-radius layui-btn-disabled”

哈哈哈哈哈，这组合名长得简直没朋友~ 按钮 button 组 - 图7 按钮 button 组 - 图8

图标

按钮 button 组 - 图9

  1. <button type="button" class="layui-btn">
  2.   <i class="layui-icon">&#xe608;</i> 添加
  3. </button>
  4.  
  5. <button type="button" class="layui-btn layui-btn-sm layui-btn-primary">
  6.   <i class="layui-icon">&#x1002;</i>
  7. </button>
  8.

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

按钮组

按钮 button 组 - 图10

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

  1. <div class="layui-btn-group">
  2.   <button type="button" class="layui-btn">增加</button>
  3.   <button type="button" class="layui-btn">编辑</button>
  4.   <button type="button" class="layui-btn">删除</button>
  5. </div>
  6.  
  7. <div class="layui-btn-group">
  8.   <button type="button" class="layui-btn layui-btn-sm">
  9.     <i class="layui-icon">&#xe654;</i>
  10.   </button>
  11.   <button type="button" class="layui-btn layui-btn-sm">
  12.     <i class="layui-icon">&#xe642;</i>
  13.   </button>
  14.   <button type="button" class="layui-btn layui-btn-sm">
  15.     <i class="layui-icon">&#xe640;</i>
  16.   </button>
  17.   <button type="button" class="layui-btn layui-btn-sm">
  18.     <i class="layui-icon">&#xe602;</i>
  19.   </button>
  20. </div>
  21.  
  22. <div class="layui-btn-group">
  23.   <button type="button" class="layui-btn layui-btn-primary layui-btn-sm">
  24.     <i class="layui-icon">&#xe654;</i>
  25.   </button>
  26.   <button type="button" class="layui-btn layui-btn-primary layui-btn-sm">
  27.     <i class="layui-icon">&#xe642;</i>
  28.   </button>
  29.   <button type="button" class="layui-btn layui-btn-primary layui-btn-sm">
  30.     <i class="layui-icon">&#xe640;</i>
  31.   </button>
  32. </div>
  33.

按钮容器

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

按钮 button 组 - 图11

  1. <div class="layui-btn-container">
  2.   <button type="button" class="layui-btn">按钮一</button> 
  3.   <button type="button" class="layui-btn">按钮二</button> 
  4.   <button type="button" class="layui-btn">按钮三</button> 
  5. </div>
  6.

结语

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

layui - 用心与你沟通