CSS辞書
アニメーション実装集に戻る

ボタンの光沢スイープ

ホバー

ホバーで光の帯がボタンを横切るシャインエフェクト。擬似要素+グラデーション+transformだけで実装できます。

プレビュー

Live

プレビュー枠は右下をドラッグすると高さを変えられます

コードを編集して試す

書き換えるとプレビューに即反映されます。変更はこのページ内だけで、リロードすると元に戻ります。

HTML
CSS

仕組みの解説

光の帯は::before擬似要素に描いた透明→白→透明のグラデーションです。初期状態でtranslate: -100% 0(左外側)に待機させ、ホバーで100%(右外側)まで移動させることで「通過」を表現します。親のoverflow: hiddenで帯がボタンの外に見えないように切り抜くのがポイントです。

実装のポイント

帯の角度(105deg)や透明度を変えるだけで印象が大きく変わります。金属的にしたいなら白の透明度を上げて幅を狭く。

使っているプロパティ