← 返回首页

按钮 - 页面元素 - Layui

📖 正文内容


按钮 - 页面元素

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

</>code

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

名称 组合
原始 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 layui-btn-primary layui-border-green"
百搭 class="layui-btn layui-btn-primary layui-border-blue"
暖色 class="layui-btn layui-btn-primary layui-border-orange"
警告 class="layui-btn layui-btn-primary layui-border-red"
深色 class="layui-btn layui-btn-primary layui-border-black"
尺寸 组合
大型 class="layui-btn layui-btn-lg"
默认 class="layui-btn"
小型 class="layui-btn layui-btn-sm"
迷你 class="layui-btn layui-btn-xs"
尺寸 组合
大型百搭 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"

</>code

  1. <button type="button" class="layui-btn layui-btn-fluid">流体按钮(最大化适应)</button>
主题 组合
原始 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"
尺寸 组合
大型百搭 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"

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

结构code

  1. <button type="button" class="layui-btn">
  2. <i class="layui-icon layui-icon-down layui-font-12"></i> 按钮
  3. </button>
  4. <button type="button" class="layui-btn layui-btn-sm layui-btn-primary">
  5. <i class="layui-icon layui-icon-left"></i>
  6. </button>

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

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

结构code

  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. <div class="layui-btn-group">
  7. <button type="button" class="layui-btn layui-btn-sm">
  8. <i class="layui-icon">&#xe654;</i>
  9. </button>
  10. <button type="button" class="layui-btn layui-btn-sm">
  11. <i class="layui-icon">&#xe642;</i>
  12. </button>
  13. <button type="button" class="layui-btn layui-btn-sm">
  14. <i class="layui-icon">&#xe640;</i>
  15. </button>
  16. <button type="button" class="layui-btn layui-btn-sm">
  17. <i class="layui-icon">&#xe602;</i>
  18. </button>
  19. </div>
  20. <div class="layui-btn-group">
  21. <button type="button" class="layui-btn layui-btn-primary layui-btn-sm">
  22. <i class="layui-icon">&#xe654;</i>
  23. </button>
  24. <button type="button" class="layui-btn layui-btn-primary layui-btn-sm">
  25. <i class="layui-icon">&#xe642;</i>
  26. </button>
  27. <button type="button" class="layui-btn layui-btn-primary layui-btn-sm">
  28. <i class="layui-icon">&#xe640;</i>
  29. </button>
  30. </div>

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

</>code

  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>

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

layui - 在每一个细节中,用心与你沟通

💡 示例代码

None

💭 技巧提示

💡
None

📚 参考资料

💬 评论交流

👤
用户 A 2026-03-25

这个技巧很实用,感谢分享!