ホバーで光の帯がボタンを横切るシャインエフェクト。擬似要素+グラデーション+transformだけで実装できます。
プレビュー枠は右下をドラッグすると高さを変えられます
書き換えるとプレビューに即反映されます。変更はこのページ内だけで、リロードすると元に戻ります。
光の帯は::before擬似要素に描いた透明→白→透明のグラデーションです。初期状態でtranslate: -100% 0（左外側）に待機させ、ホバーで100%（右外側）まで移動させることで「通過」を表現します。親のoverflow: hiddenで帯がボタンの外に見えないように切り抜くのがポイントです。
帯の角度（105deg）や透明度を変えるだけで印象が大きく変わります。金属的にしたいなら白の透明度を上げて幅を狭く。
このボタンに、ホバーで光の帯が左から右へ横切るシャインエフェクトを付けて。::before擬似要素とlinear-gradient、transformだけで実装して。
光沢スイープの帯を細く、白の透明度を高めにして金属っぽい質感にして。
そのままAIチャットに貼り付けて使える依頼文の例です。ページ上部の「AI用にコピー」でこのページ全体をコンテキストとして渡せます。