ボタン背景フィル — 動きの伝え方辞典

hover

fill hover / slide fill button

ボタン背景フィル

ホバーでボタンの背景色が一方向からスッと満ち、文字色が反転する定番演出。擬似要素をtransformで伸ばすだけの軽い実装で、CTAボタンが一段リッチに見える。

01 — Demo video

Play live →

02 — Prompt template

ボタンに fill hover(背景フィル)を実装してください。

- 塗りは ::before 擬似要素で作り、ボタンの塗り色で満たして transform: scaleX(0) で隠しておく
- ホバーで scaleX(1) に、{{duration}}s の ease-out で満たす
- 満ちる起点は {{direction}}(transform-origin で制御。bottom の場合は scaleY で縦に伸ばす)
- テキストは擬似要素より上のレイヤーに置き、文字色を同じ duration で反転させる
- background-position や width ではなく transform で動かす(リフローさせない)
- マウスが離れたら同じ duration で元に戻す
- prefers-reduced-motion 時はアニメーションなしで即座に色を切り替える

ボタンに fill hover(背景フィル)を実装してください。

- 塗りは ::before 擬似要素で作り、ボタンの塗り色で満たして transform: scaleX(0) で隠しておく
- ホバーで scaleX(1) に、{{duration}}s の ease-out で満たす
- 満ちる起点は {{direction}}(transform-origin で制御。bottom の場合は scaleY で縦に伸ばす)
- テキストは擬似要素より上のレイヤーに置き、文字色を同じ duration で反転させる
- background-position や width ではなく transform で動かす(リフローさせない)
- マウスが離れたら同じ duration で元に戻す
- prefers-reduced-motion 時はアニメーションなしで即座に色を切り替える

ボタンに fill hover(背景フィル)を実装してください。

- 塗りは ::before 擬似要素で作り、ボタンの塗り色で満たして transform: scaleX(0) で隠しておく
- ホバーで scaleX(1) に、{{duration}}s の ease-out で満たす
- 満ちる起点は {{direction}}(transform-origin で制御。bottom の場合は scaleY で縦に伸ばす)
- テキストは擬似要素より上のレイヤーに置き、文字色を同じ duration で反転させる
- background-position や width ではなく transform で動かす(リフローさせない)
- マウスが離れたら同じ duration で元に戻す
- prefers-reduced-motion 時はアニメーションなしで即座に色を切り替える

03 — Params

duration(満ちる時間 s) — 範囲 0.2〜0.8 / 初期 0.35
0.25〜0.4sが定番。0.5sを超えるとクリック前の待ち時間として意識され始める。
direction(満ちる起点) — 選択: left / bottom / center（初期: left）
満ち始める起点。leftが最も定番。bottomは重厚、centerはスピード感が出る。

04 — Vocab

::before — 要素の先頭に生成される擬似要素。塗りレイヤーをここに持たせるとHTMLを増やさず背面に敷ける。
transform-origin — 変形の基準点。scaleX(0→1)がどこから満ち始めるかはここで決まる。leftなら左から右へ満ちる。
z-index / stacking — テキストを塗りより上に保つ重ね順の制御。テキスト側にposition: relativeを与えて塗りの上に出すのが定石。
文字色の反転 — 塗りの到達と同時に文字色を切り替える。durationを塗りと揃えると一体に見える。mix-blend-mode: differenceで自動反転させる手もある。

05 — NG → OK examples

言い方: 「「ホバーしたらボタンの色が変わるようにして」」

なぜNG: background-colorを単純にtransitionするだけの実装が返ってくる。「一方向から満ちる」という方向性が伝わらず、background-positionやwidthを動かす重い実装になることも多い。

言い方: 「「fill hoverを::before + scaleXで実装。transform-origin: left、0.35s ease-out、文字色も同durationで反転、transformのみでリフロー禁止」」

なぜOK: 実装方式(擬似要素+scaleX)・起点・数値・文字色の同期まで指定。「transformのみ」の一言でbackground-positionを動かす劣化実装を防げる。