円が広がるリングアニメ
クリックを誘う円形ボタンの周囲から、波紋のようなリングが外へ広がっていく演出です。JavaScript は使わず、CSS の擬似要素 ::before と ::after に同じ @keyframes を割り当て、 transform:scale() で拡大しながら opacity をゼロへ落とすことでリングが消え…
解説
クリックを誘う円形ボタンの周囲から、波紋のようなリングが外へ広がっていく演出です。JavaScript は使わず、CSS の擬似要素 ::before と ::after に同じ @keyframes を割り当て、transform:scale() で拡大しながら opacity をゼロへ落とすことでリングが消えていきます。::after 側には animation-delay を 1 秒入れているため、2 本のリングが時間差で連続して波打ち、休みなくパルスが続きます。
使いどころ
注目させたい一点に効きます。ランディングページの主役 CTA、申し込みや無料体験への入口ボタン、地図上の現在地ピンなど「ここを押してほしい」と伝えたい場面に向きます。常時動くため、画面に複数置くと視線が散ります。原則 1 画面に 1 つだけにとどめるのが上品です。
- 色：ボタン背景とリングの
border-colorを同じ値に揃えると一体感が出ます。 - 速度と広がり：
animationの秒数で鼓動の速さ、scaleの倍率でリングの到達距離を調整できます。 - 配慮：動きが苦手な人のため
prefers-reduced-motionでアニメを止める分岐を添えると親切です。
使用例・適したシーン
- 購入完了・サブスク成約画面
- ゲーム要素のあるサイト
- イベント告知
よくある質問
リングの色だけ変えられますか
はい。擬似要素の border-color とボタンの background-color の値を差し替えれば変わります。両者を同じ色にすると波紋が自然に見え、あえて別色にすると縁取りが強調されます。
JavaScript は必要ですか
不要です。すべて CSS の keyframes アニメーションで動いており、HTML にボタンを置き CSS を読み込むだけで波紋が出ます。