1.7 按钮
向任意HTML元素设置class="layui-btn"来创建一个基础按钮。通过追加格式为layui-btn-{type}的class来定义其它按钮风格。内置的按钮class可以进行任意组合，从而形成多种按钮风格。
1.7.1 用法
测试代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="layui/css/layui.css">
<script src="layui/layui.all.js"></script>
<script src="js/jquery3.5.1.js"></script>
</head>
<body>
<div class="layui-row">
<div class="layui-col-md12">
<button type="button" class="layui-btn">一个标准的按钮</button>
<a href="http://www.layui.com" class="layui-btn">一个可跳转的按钮</a>
</div>
</div>
</body>
</html>
运行效果如图1-xx所示。
1.7.2 主题
测试代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="layui/css/layui.css">
<script src="layui/layui.all.js"></script>
<script src="js/jquery3.5.1.js"></script>
</head>
<body>
<div class="layui-row">
<div class="layui-col-md12">
<button type="button" class="layui-btn layui-btn-primary">class="layui-btn layui-btn-primary"原始</button>
<br /><br />
<button type="button" class="layui-btn">class="layui-btn"默认</button>
<br /><br />
<button type="button" class="layui-btn layui-btn-normal">class="layui-btn layui-btn-normal"百搭</button>
<br /><br />
<button type="button" class="layui-btn layui-btn-warm">class="layui-btn layui-btn-warm"暖色</button>
<br /><br />
<button type="button" class="layui-btn layui-btn-danger">class="layui-btn layui-btn-danger"警告</button>
<br /><br />
<button type="button" class="layui-btn layui-btn-disabled">class="layui-btn layui-btn-disabled"禁用</button>
</div>
</div>
</body>
</html>
运行效果如图1-xx所示。
1.7.3 尺寸
测试代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="layui/css/layui.css">
<script src="layui/layui.all.js"></script>
<script src="js/jquery3.5.1.js"></script>
</head>
<body>
<div class="layui-row">
<div class="layui-col-md12">
<button type="button" class="layui-btn layui-btn-lg">class="layui-btn layui-btn-lg"大型</button>
<br /><br />
<button type="button" class="layui-btn">class="layui-btn"默认</button>
<br /><br />
<button type="button" class="layui-btn layui-btn-sm">class="layui-btn layui-btn-sm"小型</button>
<br /><br />
<button type="button" class="layui-btn layui-btn-xs">class="layui-btn layui-btn-xs"迷你</button>
<br /><br />
</div>
<div class="layui-col-md12">
<button type="button" class="layui-btn layui-btn-lg layui-btn-normal">class="layui-btn layui-btn-lg
layui-btn-normal"大型百搭</button>
<br /><br />
<button type="button" class="layui-btn layui-btn-warm"> class="layui-btn layui-btn-warm"正常暖色</button>
<br /><br />
<button type="button" class="layui-btn layui-btn-sm layui-btn-danger">class="layui-btn layui-btn-sm
layui-btn-danger"小型警告</button>
<br /><br />
<button type="button" class="layui-btn layui-btn-xs layui-btn-disabled">class="layui-btn layui-btn-xs
layui-btn-disabled"迷你禁用</button>
<br /><br />
</div>
<div class="layui-col-md12">
<button type="button" class="layui-btn layui-btn-fluid">流体按钮（最大化适应）</button>
</div>
</div>
</body>
</html>
运行结果如图1-xx所示。
1.7.4 圆角
测试代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="layui/css/layui.css">
<script src="layui/layui.all.js"></script>
<script src="js/jquery3.5.1.js"></script>
</head>
<body>
<div class="layui-row">
<div class="layui-col-md12">
<button type="button" class="layui-btn layui-btn-radius layui-btn-primary">class="layui-btn layui-btn-radius
layui-btn-primary"原始</button>
<br /><br />
<button type="button" class="layui-btn layui-btn-radius">class="layui-btn layui-btn-radius"默认</button>
<br /><br />
<button type="button" class="layui-btn layui-btn-radius layui-btn-normal">class="layui-btn layui-btn-radius
layui-btn-normal"百搭</button>
<br /><br />
<button type="button" class="layui-btn layui-btn-radius layui-btn-warm">class="layui-btn layui-btn-radius
layui-btn-warm"暖色</button>
<br /><br />
<button type="button" class="layui-btn layui-btn-radius layui-btn-danger">class="layui-btn layui-btn-radius
layui-btn-danger"警告</button>
<br /><br />
<button type="button" class="layui-btn layui-btn-radius layui-btn-disabled">class="layui-btn layui-btn-radius
layui-btn-disabled"禁用</button>
<br /><br />
</div>
<div class="layui-col-md12">
<button type="button" class="layui-btn layui-btn-lg layui-btn-radius layui-btn-normal">class="layui-btn
layui-btn-lg layui-btn-radius layui-btn-normal"大型百搭</button>
<br /><br />
<button type="button" class="layui-btn layui-btn-sm layui-btn-radius layui-btn-danger">class="layui-btn
layui-btn-sm layui-btn-radius layui-btn-danger"小型警告</button>
<br /><br />
<button type="button" class="layui-btn layui-btn-xs layui-btn-radius layui-btn-disabled">class="layui-btn
layui-btn-xs layui-btn-radius layui-btn-disabled"迷你禁用</button>
</div>
</div>
</body>
</html>
运行效果如图1-xx所示。
1.7.5 图标
测试代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="layui/css/layui.css">
<script src="layui/layui.all.js"></script>
<script src="js/jquery3.5.1.js"></script>
</head>
<body>
<div class="layui-row">
<div class="layui-col-md12">
<button type="button" class="layui-btn">
<i class="layui-icon"></i> 添加
</button>
<button type="button" class="layui-btn layui-btn-sm layui-btn-primary">
<i class="layui-icon">ဂ</i>
</button>
<br /><br />
</div>
<div class="layui-col-md12">
<p>
<button type="button" class="layui-btn"><i class="layui-icon"></i> 添加</button>
<button type="button" class="layui-btn"><i class="layui-icon">ဂ</i></button>
<button type="button" class="layui-btn"><i class="layui-icon"></i></button>
<button type="button" class="layui-btn"><i class="layui-icon"></i></button>
<button type="button" class="layui-btn"><i class="layui-icon"></i></button>
<button type="button" class="layui-btn"><i class="layui-icon"></i></button>
<button type="button" class="layui-btn"><i class="layui-icon"></i></button>
</p>
<p>
<button type="button" class="layui-btn layui-btn-sm layui-btn-primary"><i class="layui-icon">ဂ</i></button>
<button type="button" class="layui-btn layui-btn-sm layui-btn-primary"><i class="layui-icon"></i></button>
<button type="button" class="layui-btn layui-btn-sm layui-btn-primary"><i class="layui-icon"></i></button>
<button type="button" class="layui-btn layui-btn-sm layui-btn-primary"><i class="layui-icon"></i></button>
<button type="button" class="layui-btn layui-btn-sm layui-btn-primary"><i class="layui-icon"></i></button>
<button type="button" class="layui-btn layui-btn-sm layui-btn-primary"><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 layui-btn-normal"><i class="layui-icon"></i></button>
<button type="button" class="layui-btn layui-btn-sm layui-btn-warm"><i class="layui-icon"></i></button>
<button type="button" class="layui-btn layui-btn-sm layui-btn-danger" title="编辑操作"><i class="layui-icon"></i></button>
<button type="button" class="layui-btn layui-btn-sm layui-btn-disabled"><i class="layui-icon"></i></button>
</p>
</div>
</div>
</body>
</html>
运行结果如图1-xx所示。
添加title="编辑操作"属性使按钮具有提示文本。
1.7.6 按钮组
将按钮放入一个class="layui-btn-group"元素中即可形成按钮组，按钮本身仍然可以随意搭配。
测试代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="layui/css/layui.css">
<script src="layui/layui.all.js"></script>
<script src="js/jquery3.5.1.js"></script>
</head>
<body>
<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-warm layui-btn-sm">
<i class="layui-icon"></i>
</button>
<button type="button" class="layui-btn layui-btn-danger layui-btn-sm">
<i class="layui-icon"></i>
</button>
</div>
</body>
</html>
运行结果如图1-xx所示。
1.7.7 按钮容器
尽管按钮在同节点并排显示时会自动拉开间距，但在按钮太多的情况，效果并不是很好，可以使用按钮容器。
测试代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="layui/css/layui.css">
<script src="layui/layui.all.js"></script>
<script src="js/jquery3.5.1.js"></script>
</head>
<body>
使用按钮容器：
<br />
<div class="layui-row">
<div class="layui-col-md12">
<div class="layui-btn-container">
<button type="button" class="layui-btn">按钮1</button>
<button type="button" class="layui-btn">按钮2</button>
<button type="button" class="layui-btn">按钮3</button>
<button type="button" class="layui-btn">按钮4</button>
<button type="button" class="layui-btn">按钮5</button>
<button type="button" class="layui-btn">按钮6</button>
<button type="button" class="layui-btn">按钮7</button>
<button type="button" class="layui-btn">按钮8</button>
<button type="button" class="layui-btn">按钮9</button>
<button type="button" class="layui-btn">按钮10</button>
<button type="button" class="layui-btn">按钮11</button>
<button type="button" class="layui-btn">按钮12</button>
</div>
</div>
</div>
<br />
<br />
未使用按钮容器：
<br />
<div class="layui-row">
<div class="layui-col-md12">
<button type="button" class="layui-btn">按钮1</button>
<button type="button" class="layui-btn">按钮2</button>
<button type="button" class="layui-btn">按钮3</button>
<button type="button" class="layui-btn">按钮4</button>
<button type="button" class="layui-btn">按钮5</button>
<button type="button" class="layui-btn">按钮6</button>
<button type="button" class="layui-btn">按钮7</button>
<button type="button" class="layui-btn">按钮8</button>
<button type="button" class="layui-btn">按钮9</button>
<button type="button" class="layui-btn">按钮10</button>
<button type="button" class="layui-btn">按钮11</button>
<button type="button" class="layui-btn">按钮12</button>
</div>
</div>
</body>
</html>
运行效果如图1-xx所示。