ak-button 按钮

用于行动、确认与快捷操作的基础按钮样式。

base 普通按钮

PREVIEW / BUTTON/BASEBase button

LINKING…

SOURCE / HTML

<button class="ak-button ak-font-serif">开始唤醒</button>
<button class="ak-button ak-button--outline">开始唤醒</button>
<button class="ak-button ak-button--action">开始行动</button>

block 块状按钮

PREVIEW / BUTTON/BLOCKBlock button

LINKING…

SOURCE / HTML

<button class="ak-button ak-button--block">放弃行动</button>

icon 带图标的按钮

PREVIEW / BUTTON/ICONIcon button

LINKING…

SOURCE / HTML

<button class="ak-button">
  <svg class="ak-button__icon" aria-hidden="true">
    <use href="#icon-finger-click"></use>
  </svg>
  <span class="ak-button__label">接管作战</span>
</button>

fab 浮动动作按钮

PREVIEW / BUTTON/FABFloating action button

LINKING…

SOURCE / HTML

<button class="ak-button ak-button--fab" aria-label="暂停">
  <svg class="ak-button__icon ak-icon" aria-hidden="true">
    <use href="#icon-pause"></use>
  </svg>
</button>

start 开始按钮

PREVIEW / BUTTON/STARTStart button

LINKING…

SOURCE / HTML

<button class="ak-button--start" aria-label="开始">
  <span class="icon triangle-right"></span>
  <span class="label">START</span>
</button>

card 卡片按钮

PREVIEW / BUTTON/CARDCard button

LINKING…

SOURCE / HTML

<div>
  <button class="ak-button ak-button--card with-line">
    <svg class="ak-icon" aria-hidden="true"><use href="#icon-task-fill"></use></svg>
    <span class="label">任务</span>
  </button>
  <br>
  <button class="ak-button ak-button--card" style="width: 13.5rem">
    <svg class="ak-icon" aria-hidden="true"><use href="#icon-bank-line"></use></svg>
    <span class="label">编队</span>
  </button>
  <button class="ak-button ak-button--card" style="width: 14rem">
    <svg class="ak-icon" aria-hidden="true"><use href="#icon-rook"></use></svg>
    <span class="label">干员</span>
    <span class="subtitle">角色管理</span>
  </button>
</div>

需要斜切效果时，可以组合使用 ak-fx 中的 ak-fx--skew-left 或 ak-fx--skew-right。