パルス（脈打つ）ボタン
パルスボタンは、ボタンの周囲に円形の波紋がリズミカルに広がり続ける CSS アニメーションです。実装は @keyframes と box-shadow の組み合わせだけで、画像や JavaScript を使いません。
解説
パルスボタンは、ボタンの周囲に円形の波紋がリズミカルに広がり続ける CSS アニメーションです。実装は @keyframes と box-shadow の組み合わせだけで、画像や JavaScript を使いません。波紋の正体は太さ 0 から 14px まで広がる影で、rgba の透明度を 0.7 から 0 へ変化させることで「外側に消えていく」見え方を作っています。animation:pulse 2s infinite により 2 秒周期で永続的に脈打ちます。
使う場面
- 新着通知やお知らせの「ここを見て」という視線誘導
- ヒーロー内の主役 CTA を、他の要素より目立たせたいとき
- キャンペーン・期間限定の申込ボタンなど、行動を急がせたい場面
色を変えるときは background と、波紋に使う 3 か所の rgba 値を同じ色相にそろえると自然です。周期を緩めたいなら 2s を 3s 程度に延ばします。常時動き続けるため、画面内に複数置くと注意が分散します。1 画面に 1 つを目安にしましょう。動きが苦手なユーザーへの配慮として、prefers-reduced-motion でアニメーションを止める指定を足すと親切です。
使用例・適したシーン
- お問い合わせフォームの送信ボタン
- 資料ダウンロードの CTA
- ヒーローセクションの主要 CTA
- サブスク・申込ボタン
よくある質問
波紋の色をボタンの色に合わせるには？
background の色と、@keyframes 内に 3 か所ある rgba(...) の色を同じ値にそろえます。透明度の数値（0.7 や 0）はそのまま残し、赤や緑の数値だけを差し替えると波紋とボタンが同系色で統一されます。
JavaScript は必要ですか？
不要です。アニメーションは CSS の @keyframes と box-shadow だけで動くため、HTML と CSS をコピーするだけで脈打ちます。クリック時の処理を足したいときだけ JavaScript を追加してください。