ふんわり光るボタン・脈打つボタンをCSSで作る｜コピペで使える4種類と、使う数・動く回数の決め方

ページの中で、ひとつだけ光っているボタンや、ゆっくり脈打っているボタン。目が自然にそこへ向くので、「ここを押してほしい」を伝える方法としてよく使われます。この動きは、CSSのアニメーションだけで作れます。JavaScriptは要りません。

使いどころ

1ページに1つだけ、いちばん押してほしいボタンに使う。いくつものボタンを光らせると、どれも目立たなくなる。動き続けるのが気になる場所では、2回だけ動かして止める。

今回は、波紋が広がるボタン、ふんわり光るボタン、脈打つように大きくなるボタン、光がすっと横切るボタンの4種類を、コピペ用のコードつきで紹介します。あわせて、動く速さの目安や、動きが苦手な人への配慮、「何回動かすか」の決め方もまとめました。

連載「WEBの技術」の20回目です。
今回は「光るボタン・脈打つボタン」。目立たせる技術なので、使う数と動く回数の判断まで見ていきます。

完成見本：ページを開いたときから、自動で動く

下の見本は、ページを開いたときから自動で動いています。ボタンのまわりに輪が広がっては消える「波紋」の形です。

PULSE RING1. 波紋が広がるボタンお問い合わせ・予約など、いちばん押してほしいボタン

※ 見本は見た目を見せるためのもので、読み上げソフトでは読まれないようにしています（押してもどこへも移動しません）。端末の「動きを減らす」設定がオンのときは、動きが止まって見えます。

コピペ用のコード

まず、4種類に共通の「ボタンの形」のCSSを入れます。そのうえで、使いたい動きのクラス（kd-glow-pulse など）をボタンに足します。CSSは、サイトのCSSファイルや、WordPressならテーマの「追加CSS」などに入れます。クラス名の頭の kd-glow は、サイトのほかのデザインと名前がぶつからないようにするための目印です。リンク先の /contact/ は、実際のページに書きかえてください。

共通のCSS（ボタンの形）

/* 4種類に共通：ボタンの形 */
.kd-glow-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 指で押しやすい高さにする */
  min-height: 52px;
  padding: 0 32px;
  border-radius: 999px;
  color: #FFFFFF;
  background: #0369A1;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
}
.kd-glow-btn:hover { background: #075985; }
.kd-glow-btn:focus-visible {
  outline: 3px solid #10283A;
  outline-offset: 4px;
}

共通のCSS（動きを減らす設定の人には止める）

/* 「動きを減らす」設定の人には、動きを止める */
@media (prefers-reduced-motion: reduce) {
  .kd-glow-pulse,
  .kd-glow-soft,
  .kd-glow-beat,
  .kd-glow-shine::before {
    animation: none;
  }
}

「動きを減らす」設定のCSSは、4種類のどれを使うときも一緒に入れてください。理由は、後半の「見る人への配慮」で説明します。

1. 波紋が広がるボタン

ボタンのまわりに、水の波紋のような輪が広がっては消える形です。box-shadow（影を付ける指定）の広がり（4つ目の数値）を 0 から 16px へ大きくしながら、色を透明にしていきます。影はボタンの形にそって広がるので、横長の丸いボタンでも輪の太さがそろいます。

HTML

<a class="kd-glow-btn kd-glow-pulse" href="/contact/">無料で相談する</a>

CSS

.kd-glow-pulse {
  animation: kd-glow-pulse 2s ease-out infinite;
}
@keyframes kd-glow-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(14, 165, 233, .55); }
  70%  { box-shadow: 0 0 0 16px rgba(14, 165, 233, 0); }
  100% { box-shadow: 0 0 0 0 rgba(14, 165, 233, 0); }
}

2. ふんわり光るボタン

ボタンのまわりが、ゆっくり明るくなったり暗くなったりする形です。box-shadow のぼかし（3つ目の数値）を大きくして、ボタンの外に光がにじんでいるように見せます。alternate を付けると、「明るくなる → 暗くなる」を行ったり来たりします。

HTML

<a class="kd-glow-btn kd-glow-soft" href="/contact/">資料をダウンロード</a>

CSS

.kd-glow-soft {
  animation: kd-glow-soft 1.8s ease-in-out infinite alternate;
}
@keyframes kd-glow-soft {
  from { box-shadow: 0 0 4px 0 rgba(56, 189, 248, .25); }
  to   { box-shadow: 0 0 26px 6px rgba(56, 189, 248, .75); }
}

3. 脈打つように大きくなる

心臓の鼓動のように、「ドクン、ドクン」と2回小さくふくらんで、少し休む形です。transform: scale()（大きさを変える指定）で、1.06倍と1.04倍に一瞬だけ大きくします。休む時間をはさむと、ずっと動いているより落ち着いて見えます。

HTML

<a class="kd-glow-btn kd-glow-beat" href="/contact/">いますぐ申し込む</a>

CSS

.kd-glow-beat {
  animation: kd-glow-beat 1.6s ease-in-out infinite;
}
@keyframes kd-glow-beat {
  0%, 40%, 100% { transform: scale(1); }
  10% { transform: scale(1.06); }
  25% { transform: scale(1.04); }
}

4. 光がすっと横切るボタン

ボタンの上を、斜めの光が左から右へすっと通り過ぎる形です。::before（ボタンの中に、飾りの部品を1つ足す指定）で白い半透明の帯を作り、translateX（横に動かす指定）で動かします。動くのは3秒のうち最初の0.8秒ほどで、あとは止まっています。

HTML

<a class="kd-glow-btn kd-glow-shine" href="/contact/">くわしく見る</a>

CSS

.kd-glow-shine {
  /* はみ出した光を、ボタンの形で切り取る */
  overflow: hidden;
}
.kd-glow-shine::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 40%;
  height: 100%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .55), rgba(255, 255, 255, 0));
  transform: translateX(-150%) skewX(-20deg);
  animation: kd-glow-shine 3s ease-in-out infinite;
}
@keyframes kd-glow-shine {
  0%       { transform: translateX(-150%) skewX(-20deg); }
  28%, 100% { transform: translateX(300%) skewX(-20deg); }
}

仕組み：動きを「時間の表」に書く

1. @keyframes で、途中の形を決める

CSSのアニメーションは、@keyframes（動きの途中の形を並べた表）と、animation（その表を、何秒で何回動かすか）の2つでできています。

1の波紋なら、「0%（始まり）では影の広がりが0で、色が濃い」「70%では広がりが16pxで、色が透明」と書いています。そのあいだの形は、ブラウザが自動で計算してつないでくれます。70%から100%は、透明のまま広がりを0に戻す時間です。見えないところで元に戻しておくので、次の波紋がまたボタンのふちから始まります。

2. animation で、時間と回数を決める

animation: kd-glow-pulse 2s ease-out infinite; は、左から「どの表を使うか」「1回にかける時間（2秒）」「速さの変わり方」「くり返す回数」です。ease-out は「始めは速く、終わりはゆっくり」という変わり方で、水の波紋のように、広がるほど落ち着いて見えます。infinite は「ずっとくり返す」という意味です。数字を書けば、その回数で止まります。

2の「ふんわり光る」で使っている alternate は、1回目は表の始まりから終わりへ、2回目は終わりから始まりへ、と交互に動かす指定です。明るくなったあと、同じ速さで暗くなるので、呼吸のような動きになります。

3. 影で光らせる・大きさで脈打たせる

1と2は、どちらも box-shadow を動かしています。box-shadow の数値は「横のずれ・縦のずれ・ぼかし・広がり・色」の順です。ずれを0にして真下や横に影を落とさず、ボタンのまわり全体に出すと、影というより「光」に見えます。1は広がりを、2はぼかしを大きくしています。

3の「脈打つ」は、影ではなく transform: scale() でボタンそのものの大きさを変えています。4の「光が横切る」は、::before で足した白い帯を、translateX() で左から右へ動かしています。帯がボタンの外にはみ出さないよう、ボタンに overflow: hidden（はみ出た部分を見せない指定）を付けています。

数値を変えるとどうなるか

波紋の速さ（1の見本の 2s）

同じ波紋で、1回にかける時間だけを変えて並べました。

1秒：せかされる

2秒：目安の速さ

4秒：気づきにくい

1秒だと、輪が次々に出て、せかされているように見えます。4秒だと、動いていることに気づきにくくなります。KAKERUでは、2秒前後を目安にしています。なお、W3Cのアクセシビリティの基準（WCAG 2.2）では、1秒間に3回より多く光るもの（点滅）を置かないこととされています。光る系の動きで、1回の時間を0.3秒より短くすることはありません。

変えるところ	小さくすると	大きくすると
1回の時間（1・2の 2s / 1.8s）	動きが速くなり、落ち着かない	ゆっくりになり、気づかれにくい
波紋の広がり（1の 16px）	輪が小さく、控えめになる	輪が大きく、まわりの文字に重なって見える
光のぼかし（2の 26px）	ふちだけがくっきり光る	ぼんやり広く光り、ボタンの形がにじむ
ふくらむ大きさ（3の 1.06）	動きが小さく、気づかれにくい	はねるように見え、文字が読みにくい瞬間ができる

スマホと、見る人への配慮

動きが苦手な人には、止める

画面の中で何かがずっと動いていると、気分が悪くなったり、文章に集中できなくなったりする人がいます。iPhoneの「視差効果を減らす」など、端末の「動きを減らす」設定がオンのときは、prefers-reduced-motion で受け取って、アニメーションを止めます。コピペ用の「共通のCSS」に入れているのが、その指定です。止めてもボタンの色と形は残るので、押す場所は分かります。

ずっと動かすなら、5秒を目安に考える

WCAG 2.2では、自動で始まり、5秒より長く続き、ほかの内容と一緒に出ている動きには、止める・隠す方法を用意することとされています。ずっと光り続けるボタンは、この条件に当てはまります。止めるボタンを別に置くのは大げさなので、KAKERUでは、動く回数を決めて5秒より前に止める形をすすめています（このあとの「KAKERUならこう使う」で、コードを紹介します）。

文字の読みやすさは、止まった状態で確かめる

光らせると、ボタンの色が明るく見える瞬間があります。白い文字が読めるかどうかは、止まっている状態の色で確かめます。今回のボタンは、背景を濃い青（#0369A1）にしていて、白い文字との明るさの差（コントラスト）は約5.9対1です。KAKERUブルー（#0EA5E9）をボタンの背景に使うと、白い文字との差が足りなくなるので、光の色にだけ使っています。

キーボードで選んだときに、見えるように

ボタンは <a href> のリンクで作っているので、キーボードの Tab キーで選べます。光っている影と、キーボードで選んだときの枠がまぎれないよう、:focus-visible（キーボードで選んだときだけ当たる指定）で、紺色の太い枠を少し離して付けています。

やりすぎ注意

光るボタンは、ページの中で「ここだけ特別」に見えるから効きます。2つ、3つと光らせると、どれが大事かが分からなくなり、ページ全体がにぎやかになるだけです。動きは、「ここにボタンがある」と知らせたい理由があるところにだけ置きます。

光らせるのは、そのページで「これだけは押してほしい」ボタン1つだけ。
候補が2つあるなら、まずどちらが大事かを決めるほうが先だと考えています。

AIに頼むなら

光るボタンは、Claudeなどの生成AIに頼んでもすぐ作ってもらえます。そのときは「どんな動きか」「速さ」「回数」「動きを減らす設定」「文字の読みやすさ」まで、まとめて伝えると手直しが少なく済みます。

お問い合わせボタンのまわりに、波紋が広がるアニメーションをCSSだけで作って。
box-shadow の広がりを 0→16px、1回2秒で、2回だけ動かして止める。
prefers-reduced-motion のときは動かさない。背景は白い文字とのコントラストが4.5:1以上の濃い青で。

AIが出したコードは、そのまま使う前に、次の3つを確かめます。

ずっと動き続ける設定になっていないか。infinite が入っていたら、本当にずっと動かしたいのかを考えます。回数で止めるなら、数字に書きかえます
「動きを減らす」設定のときに止まるか。iPhoneなら「視差効果を減らす」をオンにして、ページを開き直して確かめます
光っている瞬間も、文字が読めるか。ボタンの背景が明るい色になっていると、白い文字が読みにくくなります。スマホの画面で、動いている途中の見え方も見ます

KAKERUならこう使う／使わない

最後に、作り手としての判断です。

使う場面

お問い合わせ・予約・申し込みの、いちばん大事なボタン。ページの最後や、料金の下など、読み終えた人が次に押すボタンに1つだけ使います
ボタンがほかの部品にまぎれやすいページ。写真や色の多いページで、ボタンが背景に溶けてしまうときに、4の「光が横切る」のような控えめな動きを足します
最初の数秒だけ知らせたいとき。ページを開いた人に「ここにボタンがある」と気づいてもらえれば十分なので、下のコードのように回数を決めて止めます

応用：2回だけ動かして止める（HTMLの class に is-twice を足す）

/* 2回だけ波紋を出して、止める（2秒 × 2回 = 4秒） */
.kd-glow-pulse.is-twice {
  animation-iteration-count: 2;
}

使わない場面

1ページに、押してほしいボタンが何個もあるとき。全部を光らせると、どれも目立たなくなります。光らせない形で、大きさや色の差をつけるほうを先に考えます
本文の途中のリンクや、メニューの中。読んでいる途中で目の端が動くと、文章に集中できなくなります。光らせるのは、読み終えたあとのボタンに限ります
3の「脈打つ」を、ふだんのボタンに使うこと。大きさが変わる動きは強く見えるので、期間限定の申し込みなど、短い期間のページに限っています

「目立たないから光らせる」の前に、ボタンの色・大きさ・置く場所で目立たせられないかを見ます。
動きは、そのあとに足す最後のひと押しという位置づけです。

まとめ

光るボタン・脈打つボタンは、@keyframes と animation のCSSだけで作れる。JavaScriptは要らない
波紋は box-shadow の「広がり」、ふんわり光るのは「ぼかし」、脈打つのは transform: scale()、横切る光は ::before と translateX()
速さは2秒前後が目安。1秒間に3回より多く光らせない
prefers-reduced-motion で、動きを減らす設定の人には止める。ずっと動かすより、回数を決めて止める形がおすすめ
文字の読みやすさは止まった状態で確かめ、キーボードで選んだときの枠も見えるようにする
光らせるのは、1ページに1つ。いちばん押してほしいボタンだけ

まずは1の「波紋が広がるボタン」のコードをコピーして、お問い合わせのボタンで試してみてください。そのあと端末の「動きを減らす」設定をオンにして、ページを開き直すと、止まったときの見え方も確かめられます。

参考にした資料

いずれも2026年10月24日に確認しました。ブラウザの対応状況は変わることがあります。最新の情報は各ページでご確認ください。

MDN「animation」（英語）
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/animation
※animation で、時間・速さの変わり方・くり返す回数・向きをまとめて指定できること
MDN「animation-iteration-count」（英語）
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/animation-iteration-count
※くり返す回数を数字で決められ、infinite でずっとくり返すこと
MDN「animation-direction」（英語）
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/animation-direction
※alternate で、行きと帰りを交互にくり返すこと
MDN「box-shadow」（英語）
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/box-shadow
※影の数値が「横・縦・ぼかし・広がり・色」の順であること。広く使える（Baseline）段階であること
MDN「transform」（英語）
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/transform
※scale() で大きさを、translateX() で横の位置を変えられること
MDN「::before」（英語）
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/::before
※要素の中に、飾りの部品を1つ足せること
MDN「prefers-reduced-motion」（英語）
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/prefers-reduced-motion
※端末の「動きを減らす」設定を、CSSで受け取る方法
Apple サポート「iPhone、iPad、iPod touch で画面の視差効果を減らす」
https://support.apple.com/ja-jp/111781
※iPhoneの「視差効果を減らす」の場所
W3C「Understanding SC 2.2.2 Pause, Stop, Hide」（英語）
https://www.w3.org/WAI/WCAG22/Understanding/pause-stop-hide.html
※自動で始まり、5秒より長く続き、ほかの内容と一緒に出ている動きには、止める・隠す方法を用意すること
W3C「Understanding SC 2.3.1 Three Flashes or Below Threshold」（英語）
https://www.w3.org/WAI/WCAG22/Understanding/three-flashes-or-below-threshold.html
※1秒間に3回より多く光るもの（点滅）を置かないこと