- 首页
- 组件
- 按钮 Button
按钮 Button
按钮基类
btn,变体控制配色与形态(实心/空心/圆角/大中小),btn btn-index 为主按钮。
基础与尺寸 · 18 个
<button type="button" class="btn btn-index btn-small">小按钮</button>
<button type="button" class="btn btn-index btn-larger">大按钮</button>
<button type="button" class="btn btn-index btn-circle">圆按钮</button>
<button type="button" class="btn btn-index btn-disabled">禁用</button>
主次色 · 14 个
btn-default / btn-default-hollow 带 nth-child 12 色轮换:同组多个会逐格变彩虹色(上例各放 3 枚演示),混排其它色时慎用。
同排次要按钮用
btn-index-hollow;btn-white-hollow 仅限深色背景(浅底会隐身,见单色系)。
<button type="button" class="btn btn-index">主操作</button>
<button type="button" class="btn btn-index-hollow">次要操作</button>
单色系 · 18 个
<button type="button" class="btn btn-red">red</button>
<button type="button" class="btn btn-green-hollow">green-hollow</button>
<div class="fill-black pdrem-8">
<button type="button" class="btn btn-white-hollow">white-hollow</button>
</div>
业务色 · 34 个
<button type="button" class="btn btn-add">新增</button>
<button type="button" class="btn btn-save-hollow">保存</button>
<button type="button" class="btn btn-del">删除</button>
圆角 · 12 个
<button type="button" class="btn btn-index btn-radius-2">radius-2</button>
<button type="button" class="btn btn-index btn-radius-8">radius-8</button>
表单按钮
<form class="form">
<div class="form-item"><input type="text" class="form-input"></div>
<div class="form-item"><input type="button" class="form-button" value="提交"></div>
</form>
提示: 霓虹渐变等特殊按钮效果由自定义实现,普通业务优先上述标准按钮。
KuoqiUI v2.00 · 离线静态文档 · 界面基于 KuoqiUI ·
返回首页