ホバーエフェクト（ボタン）

src/assets/sass/global/mixins/ に、any-hover・:focus-visible・リンクの opacity 打ち消しなどを含めたホバー用 Sass mixin を置いている。コンポーネント SCSS では @use '../global' as *; のあと @include で呼び出す。各セクションに、このデモで使っている mixin を記載している。

背景色の変化

.c-button {
    --button-bg: var(--color-bg-sub);
    --button-bg-hover: var(--color-theme);
    --button-text-color: var(--color-text);
    --button-text-color-hover: var(--color-bg);
    background-color: var(--button-bg);
    color: var(--button-text-color);
  @include hover-bg;
}
背景色が変わるボタン

スケール（拡大/縮小）

.c-button {
  @include hover-scale;
}
拡大するボタン

スライド

.c-button {
    --button-bg: var(--color-bg-sub);
    --button-bg-hover: var(--color-theme);
    --button-text-color: var(--color-text);
    --button-text-color-hover: var(--color-bg);
    background-color: var(--button-bg);
    color: var(--button-text-color);
  @include hover-bg-slide-before;
}
スライドするボタン

シャドウの変化

.c-button {
  @include hover-shadow;
}
シャドウが変わるボタン

リップルエフェクト

.c-button {
    --button-bg: var(--color-bg-sub);
    --button-bg-hover: var(--color-theme);
    --button-text-color: var(--color-text);
    --button-text-color-hover: var(--color-bg);
    background-color: var(--button-bg);
    color: var(--button-text-color);
  @include hover-ripple-after;
}
リップルエフェクト

アイコンのアニメーション

.c-button {
    --button-bg: var(--color-bg-sub);
    --button-bg-hover: var(--color-theme);
    --button-text-color: var(--color-text);
    --button-text-color-hover: var(--color-bg);
    background-color: var(--button-bg);
    color: var(--button-text-color);
  @include button-icon-after(url("../images/common/icon_arrow_right.svg"));
  @include button-icon-after-nudge;
}
アイコンアニメーション

グラデーションの変化

.c-button-gradient {
    --button-bg: var(--gradation-theme-accent-hover);
    --button-bg-hover: color-mix(var(--color-bg) 10%, transparent);
    --button-text-color: var(--color-bg);
    --button-text-color-hover: var(--color-bg);
    background-image: var(--button-bg);
    color: var(--button-text-color);
  @include hover-bg-position-slide;
}
グラデーションが変化するボタン

グラデーションにオーバーレイ（スライド）

.c-button-gradient {
    --button-bg: var(--gradation-theme-accent-hover);
    --button-bg-hover: color-mix(var(--color-bg) 10%, transparent);
    --button-text-color: var(--color-bg);
    --button-text-color-hover: var(--color-bg);
    background-image: var(--button-bg);
    color: var(--button-text-color);
  @include hover-bg-slide-before;
}
グラデーションが変化するボタン