按钮 Button

常用的按钮样式

默认按钮

任何块元素添加".open-btn"即可创建一个基础按钮，然后通过追加".open-btn-primary || .open-btn-warn || .open-btn-danger"定义不同颜色风格的按钮

显示代码

<div class="open-container open-container-horizontal">
  	<button class="open-btn">默认按钮</button>
	<button class="open-btn open-btn-primary">重要按钮</button>
	<button class="open-btn open-btn-warn">警告按钮</button>
	<button class="open-btn open-btn-danger">危险按钮</button>
</div>

文字按钮

通过往元素添加属性值：text，定义文字按钮

显示代码

<div class="open-container open-container-horizontal">
	<button class="open-btn" text>文字按钮</button>
	<button class="open-btn open-btn-primary" text>重要文字</button>
	<button class="open-btn open-btn-warn" text>警告文字</button>
	<button class="open-btn open-btn-danger" text>危险文字</button>
</div>

背景样式

通过往元素添加属性值：bg，定义带背景色按钮

显示代码

<div class="open-container open-container-horizontal">
	<button class="open-btn" bg>默认按钮</button>
	<button class="open-btn open-btn-primary" bg>重要按钮</button>
	<button class="open-btn open-btn-warn" bg>警告按钮</button>
	<button class="open-btn open-btn-danger" bg>危险按钮</button>
</div>

按钮尺寸

通过追加样式类名".open-btn-lg || .open-btn-sm"定义不同尺寸的按钮

显示代码

<div class="open-container open-container-horizontal">
	<button class="open-btn open-btn-primary open-btn-lg" bg>大按钮</button>
	<button class="open-btn open-btn-primary" bg>默认按钮</button>
	<button class="open-btn open-btn-primary open-btn-sm" bg>小按钮</button>
</div>

圆角按钮

通过追加样式类名".open-btn-radius"定义圆角的按钮

显示代码

<div class="open-container open-container-horizontal">
	<button class="open-btn open-btn-primary open-btn-radius" bg>圆角按钮</button>
</div>