Amaze UI

Button


基础用法

链接
Copy
<button type="button" class="am-btn am-btn-default">默认样式</button>
<button type="button" class="am-btn am-btn-primary">主色按钮</button>
<button type="button" class="am-btn am-btn-secondary">次色按钮</button>
<button type="button" class="am-btn am-btn-success">绿色按钮</button>
<button type="button" class="am-btn am-btn-warning">橙色按钮</button>
<button type="button" class="am-btn am-btn-danger">红色按钮</button>
<a class="am-btn am-btn-link">链接</a>

在要应用按钮样式的元素上添加 .am-btn,再设置相应的颜色,按钮默认 4px 大小的 border-radius

  • .am-btn-default - 默认,灰色按钮
  • .am-btn-primary - 蓝色按钮
  • .am-btn-secondary - 浅蓝色按钮
  • .am-btn-success - 绿色按钮
  • .am-btn-warning - 橙色按钮
  • .am-btn-danger - 红色按钮
  • .am-btn-link- 链接按钮

在线运行

拓展样式

Copy
<button type="button" class="am-btn am-btn-primary am-btn-hollow">幽灵按钮</button>
<button type="button" class="am-btn am-btn-primary am-btn-hollow am-square">平角按钮</button>
<button type="button" class="am-btn am-btn-primary am-btn-hollow am-round">椭圆按钮</button>
  • .am-btn-hollow- 幽灵按钮
  • .am-square - 与.am-btn组合,平角按钮
  • .am-round- 与.am-btn组合,椭圆按钮

在线运行

按钮状态

Copy
<button type="button" class="am-btn am-btn-primary am-active">激活状态</button>
<button type="button" class="am-btn am-btn-primary am-disabled">禁用状态</button>
  • .am-active - 与am-btn组合,激活状态
  • .am-disabled - 与am-btn组合,禁用状态

在线运行

*IE9 会把设置了 disabled 属性的 button 元素文字渲染成灰色并加上白色阴影,CSS 无法控制这个默认样式。

按钮尺寸

Copy
<button class="am-btn am-btn-primary am-btn-xl">按钮 - xl</button>
<button class="am-btn am-btn-primary am-btn-lg">按钮 - lg</button>
<button class="am-btn am-btn-primary">默认尺寸</button>
<button class="am-btn am-btn-primary am-btn-sm">按钮 - sm</button>
<button class="am-btn am-btn-primary am-btn-xs">按钮 - xs</button>
  • .am-btn-xl
  • .am-btn-lg
  • .am-btn-default
  • .am-btn-sm
  • .am-btn-xs

在线运行

块级显示

Copy
<button type="button" class="am-btn am-btn-primary am-btn-block">块级显示的按钮</button>
<button type="button" class="am-btn am-btn-default am-btn-block">块级显示的按钮</button>
  • .am-btn-block- 块级按钮

在线运行

按钮 Icon

使用 Icon 之前需先引入 Icon 组件

结账
Copy
<button class="am-btn am-btn-default">
  <i class="am-icon-cog"></i> 设置
</button>
<a class="am-btn am-btn-warning" href="#">
  <i class="am-icon-shopping-cart"></i> 结账
</a>
<button class="am-btn am-btn-default">
  <i class="am-icon-spinner am-icon-spin"></i> 加载中
</button>
<button class="am-btn am-btn-primary">
  <i class="am-icon-cloud-download"></i> 下载
</button>