colorui-doc/docs/10.文档/20.基础元素/50.按钮.md

title, date, permalink, article

title	date	permalink	article
按钮	2023-05-28 15:20:38	/pages/basics/button	false

按钮形状

css 代码

.cu-btn  默认　　
.cu-btn round  圆角
.cu-btn cuIcon  图标按钮

演示代码

<button class="cu-btn">默认</button>
<button class="cu-btn round">圆角</button>
<!-- 图标按钮 -->
<button class="cu-btn cuIcon">
    <text class="cuIcon-emojifill"></text>
</button>

按钮尺寸

css 代码

.cu-btn sm  小尺寸
.cu-btn  默认
.cu-btn lg  大尺寸

演示代码

<button class="cu-btn round sm">小尺寸</button>
<button class="cu-btn round">默认</button>
<button class="cu-btn round lg">大尺寸</button>

按钮颜色

css 代码

.bg-red 背景颜色 | .bg-...
.shadow 阴影

演示代码

<button class="cu-btn round bg-red shadow">按钮</button>

镂空按钮

.bg- 换成 .line-

css 代码

.lines-red|... 边框深（大）
.line-red|...  边框浅（小）

演示代码

<button class="cu-btn round line-red shadow">按钮</button>

块状按钮

css 代码

.cu-btn lg

演示代码

<button class="cu-btn bg-grey lg">玄灰</button>
<button class="cu-btn bg-red margin-tb-sm lg">嫣红</button>

无效状态

加上 disabled 属性即可

演示代码

<button class="cu-btn block bg-blue margin-tb-sm lg" disabled type="">无效状态</button>
<button class="cu-btn block line-blue margin-tb-sm lg" disabled>无效状态</button>

按钮加图标

button 标签里加入图标+文字即可，需要加载状态，加上属性 loading

演示代码

<button class="cu-btn block line-orange lg">
    <text class="cuIcon-upload"></text> 图标
</button>
<button class="cu-btn block bg-blue margin-tb-sm lg">
    <text class="cuIcon-loading2 cuIconfont-spin"></text> 加载
</button>
<button class="cu-btn block bg-black margin-tb-sm lg" loading> 
    原生加载
</button>