ホバーで光の帯がボタンを横切るシャインエフェクト。擬似要素+グラデーション+transformだけで実装できます。
プレビュー枠は右下をドラッグすると高さを変えられます
書き換えるとプレビューに即反映されます。変更はこのページ内だけで、リロードすると元に戻ります。
光の帯は::before擬似要素に描いた透明→白→透明のグラデーションです。初期状態でtranslate: -100% 0(左外側)に待機させ、ホバーで100%(右外側)まで移動させることで「通過」を表現します。親のoverflow: hiddenで帯がボタンの外に見えないように切り抜くのがポイントです。
帯の角度(105deg)や透明度を変えるだけで印象が大きく変わります。金属的にしたいなら白の透明度を上げて幅を狭く。