1. 首页
  2. 组件
  3. 按钮 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 · 返回首页