Diagonal Sweep Button
斜めスイープ
Generation Prompt
【対象要素】 - サイト内のボタン1点(CTA・リンクボタン・フォームの送信ボタン等)に適用する 【演出内容】 - ホバーすると、傾いた帯が左下から右上へ斜めに走り抜けてボタンを塗り替える - 帯の角度がつくことで、真横のワイプより速度感が出る 【品質要件】 - 走る時間は0.5秒前後。帯の傾きは20度前後に留める - 帯はボタンの角丸の内側に収め、上下の端に隙間を作らない - prefers-reduced-motion 時は演出を無効化し、状態変化だけが分かる静的表示にフォールバックする - ラベルの可読性を落とさない。文字が読めなくなる瞬間を作らない
[Target element] - Apply to a single button on your site (a CTA, a link button, a form submit button, etc.) [Motion] - On hover a slanted band sweeps diagonally from the lower left to the upper right and repaints the button - The angle gives it more sense of speed than a straight horizontal wipe [Quality requirements] - The sweep takes about 0.5s. Keep the slant around 20 degrees - Clip the band inside the rounded corners and leave no gap at the top or bottom edges - When prefers-reduced-motion is set, disable the animation and fall back to a static state change - Never reduce the legibility of the label; do not create a moment where the text cannot be read
Prompts and demo code are free to use in your own projects. See About.