ak-button 按钮

明日方舟按钮样式

base 普通按钮

示例（暗色）

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

block 块状按钮

示例（暗色）

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

icon 带图标的按钮

示例（暗色）

<button class="ak-button">
  <i class="ak-button__icon">
    <img src="/img/icon/finger-click.svg" />
  </i>
  <span class="ak-button__label">接管作战</span>
</button>

bg 图标背景的按钮

fab 浮动动作按钮

示例（暗色）

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

如果你想实现明日方舟中按钮的斜切效果，你可以为其加上 ak-fx--skew-left or ak-fx--skew-right。
可参考 ak-fx 斜切效果

start 开始按钮

示例（暗色）

START

<div class="ak-button--start">
  <div class="icon triangle-right"></div>
  <div class="label">START</div>
</div>

如想要添加更多效果参见 ak-fx。

card 卡片按钮

示例（尘）

任务

编队

干员

角色管理

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