← All motions
Fullscreen ↗

Diagonal Sweep Button

斜めスイープ

No.
090
Category
Button
Tech
CSS
【対象要素】
- サイト内のボタン1点(CTA・リンクボタン・フォームの送信ボタン等)に適用する

【演出内容】
- ホバーすると、傾いた帯が左下から右上へ斜めに走り抜けてボタンを塗り替える
- 帯の角度がつくことで、真横のワイプより速度感が出る

【品質要件】
- 走る時間は0.5秒前後。帯の傾きは20度前後に留める
- 帯はボタンの角丸の内側に収め、上下の端に隙間を作らない
- prefers-reduced-motion 時は演出を無効化し、状態変化だけが分かる静的表示にフォールバックする
- ラベルの可読性を落とさない。文字が読めなくなる瞬間を作らない

Prompts and demo code are free to use in your own projects. See About.