按钮 - 页面元素

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

用法
codejipai.code
  1. <button class="jipai-btn">一个标准的按钮</button>
  2. <a href="/" class="jipai-btn">一个可跳转的按钮</a>
  3.

主题

名称 组合
原始 class="jipai-btn jipai-btn-primary"
默认 class="jipai-btn"
百搭 class="jipai-btn jipai-btn-normal"
暖色 class="jipai-btn jipai-btn-warm"
警告 class="jipai-btn jipai-btn-danger"
禁用 class="jipai-btn jipai-btn-disabled"
尺寸

尺寸 组合
大型 class="jipai-btn jipai-btn-big"
默认 class="jipai-btn"
小型 class="jipai-btn jipai-btn-small"
迷你 class="jipai-btn jipai-btn-mini"

尺寸 组合
大型百搭 class="jipai-btn jipai-btn-big jipai-btn-normal"
正常暖色 class="jipai-btn jipai-btn-warm"
小型警告 class="jipai-btn jipai-btn-small jipai-btn-danger"
迷你禁用 class="jipai-btn jipai-btn-mini jipai-btn-disabled"
圆角

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

尺寸 组合
大型百搭 class="jipai-btn jipai-btn-big jipai-btn-radius jipai-btn-normal"
小型警告 class="jipai-btn jipai-btn-small jipai-btn-radius jipai-btn-danger"
迷你禁用 class="jipai-btn jipai-btn-mini jipai-btn-radius jipai-btn-disabled"

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

图标

结构jipai.code
  1. <button class="jipai-btn">
  2.   <i class="jipai-icon">&#xe608;</i> 添加
  3. </button>
  4.  
  5. <button class="jipai-btn jipai-btn-small jipai-btn-primary">
  6.   <i class="jipai-icon">&#x1002;</i>
  7. </button>
  8.

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

结语

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

Layui - 用心与你沟通