ak-fx 效果

效果类可以与按钮、卡片等模块组合使用。

glow 辉光

使用 --ak-fx-glow-color 调整辉光颜色。

PREVIEW / FX/GLOWGlow effect

LINKING…

SOURCE / HTML

<button class="ak-button ak-fx--glow">放弃行动</button>
<button class="ak-button ak-button--action ak-fx--glow" style="--ak-fx-glow-color: var(--ak-color-primary)">开始行动</button>

outline 轮廓

使用 --ak-outline-color 调整轮廓颜色。

PREVIEW / FX/OUTLINEOutline effect

LINKING…

SOURCE / HTML

<button class="ak-button ak-fx--outline">放弃行动</button>
<button class="ak-button ak-fx--outline" style="--ak-outline-color: purple">放弃行动</button>
<button class="ak-button ak-fx--outline" style="--ak-outline-color: var(--ak-color-primary)">放弃行动</button>

skew 倾斜

PREVIEW / FX/SKEWSkew effect

LINKING…

SOURCE / HTML

<button class="ak-button ak-button--fab ak-fx--skew-left" aria-label="设置">
  <svg class="ak-button__icon ak-icon" aria-hidden="true"><use href="#icon-gear"></use></svg>
</button>
<button class="ak-button ak-button--fab ak-fx--skew-right" aria-label="暂停">
  <svg class="ak-button__icon ak-icon" aria-hidden="true"><use href="#icon-pause"></use></svg>
</button>