KAKERU Designing トミー（末富将也）

ボタンを押したときのへこむ動き｜:activeで沈む・縮む・内側の影・押したままのボタン、コピペ4種類と使いどころ

ボタンを押した瞬間のへこむ動き。:activeで沈む・縮む・押したままのボタンの見本とコード

ボタンを押したとき、見た目が何も変わらないと「今、押せたのかな」と一瞬迷います。押した瞬間に少しへこむだけで、操作が受けつけられたことが伝わります。CSSの :active を使うと、押している間だけ見た目を変えられます。

使いどころは「申し込む」「送信する」など、押したことをはっきり伝えたいボタンです。文章の中のリンクのように、押すとすぐ次のページへ移るものには、なくてもかまいません。

この記事の要点

  • :active（押している間だけ当たる指定）で、ボタンを下げる・縮める・内側に影を入れると、押した手ごたえを見せられる
  • 使いどころは、申し込み・送信・検索など、押したことをはっきり伝えたいボタン。オン・オフを切りかえるボタンは aria-pressed で、へこんだままにする
  • 動きは数px・0.1秒くらいまで。動きを減らす設定の人には一瞬で切りかえ、キーボードで選んだときの枠も消さない
トミー

連載「WEBの技術」の42回目です。
2回目でマウスを乗せたときの動きを紹介しました。今回はその次、「押した瞬間」の動きです。

完成見本：押したときの動き4種類

見本は、自動でくり返し押されるようにしています。マウスで押しても、同じように動きます。

TRANSLATEY ＋ BOX-SHADOW1. 厚みが沈むボタン「申し込む」「送信する」など、いちばん押してほしいボタン
SCALE(0.96)2. 少し縮むボタン「もっと見る」「次へ」など、ふんわりした見た目のボタン
BOX-SHADOW: INSET3. 内側に影が入るボタン「検索」「絞り込む」など、入力欄の横に置く小さめのボタン
ARIA-PRESSED4. 押したままになるボタン「お気に入り」「通知をオン」など、押すたびにオン・オフが切りかわるボタン

※ 見本は読み上げソフトでは読まれないようにしています（コピペ用のコードは、そのまま読み上げられる形です）。

コピペ用のコード

CSSは、サイトのCSSファイルや、WordPressならテーマの「追加CSS」などに入れます。クラス名の頭の kd-press は、サイトのほかのデザインと名前がぶつからないようにするための目印です。4だけは、押すたびにオン・オフを入れかえる短いJavaScriptも使います。

1. 厚みが沈むボタン

ボタンの下に、ぼかしのない濃い色の影（box-shadow: 0 4px 0）を付けて「厚み」に見せます。押している間は :active（押している間だけ当たる指定）で、transform: translateY(4px)（下へ4px動かす）と、影を0にする指定を同時に入れます。ボタンが沈んだ分だけ厚みが消えるので、押しこんだように見えます。

HTML
<button type="button" class="kd-press-sink">申し込む</button>
CSS
.kd-press-sink {
  padding: 14px 28px;
  /* 透明な枠線：ふだんは見えず、強制カラーモードでは枠になる */
  border: 2px solid transparent;
  border-radius: 10px;
  background: #0369A1;
  color: #FFFFFF;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  /* 下に4pxの濃い色の影＝ボタンの「厚み」 */
  box-shadow: 0 4px 0 #0C4A6E;
  transition: transform 0.08s, box-shadow 0.08s;
}
/* 押している間：4px下がり、厚みが0になる */
.kd-press-sink:active {
  transform: translateY(4px);
  box-shadow: 0 0 0 #0C4A6E;
}
/* キーボードで選んだときの枠 */
.kd-press-sink:focus-visible {
  outline: 3px solid #0284C7;
  outline-offset: 3px;
}
/* 動きを減らす設定の人には、ゆっくり動かさず一瞬で切りかえる */
@media (prefers-reduced-motion: reduce) {
  .kd-press-sink {
    transition: none;
  }
}

2. 少し縮むボタン

押している間だけ transform: scale(0.96)（96%の大きさに縮める）にします。ふんわりした影も一緒に小さくすると、ボタンが画面に近づいたように見えます。下へ動かさないので、丸いボタンや、影のやわらかいデザインに合います。

HTML
<button type="button" class="kd-press-shrink">もっと見る</button>
CSS
.kd-press-shrink {
  padding: 14px 28px;
  border: 2px solid #0369A1;
  border-radius: 999px;
  background: #FFFFFF;
  color: #0369A1;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(3, 105, 161, 0.22);
  transition: transform 0.1s, box-shadow 0.1s;
}
/* 押している間：少し小さくなり、影も小さくなる */
.kd-press-shrink:active {
  transform: scale(0.96);
  box-shadow: 0 2px 6px rgba(3, 105, 161, 0.22);
}
/* キーボードで選んだときの枠 */
.kd-press-shrink:focus-visible {
  outline: 3px solid #0284C7;
  outline-offset: 3px;
}
/* 動きを減らす設定の人には、ゆっくり動かさず一瞬で切りかえる */
@media (prefers-reduced-motion: reduce) {
  .kd-press-shrink {
    transition: none;
  }
}

3. 内側に影が入るボタン

box-shadow に inset（内側に付ける）を付けると、影がボタンの内側にできます。押している間だけ内側の上に影を入れ、背景を少し暗くすると、表面がへこんだように見えます。ボタンの位置も大きさも変わらないので、まわりの部品が動きません。

HTML
<button type="button" class="kd-press-inset">検索</button>
CSS
.kd-press-inset {
  padding: 13px 26px;
  border: 1px solid #7B8A97;
  border-radius: 8px;
  background: #F2F8FC;
  color: #10283A;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.1s, box-shadow 0.1s;
}
/* 押している間：少し暗くなり、内側の上に影が付く */
.kd-press-inset:active {
  background: #E2EBF2;
  box-shadow: inset 0 3px 6px rgba(16, 40, 58, 0.28);
}
/* キーボードで選んだときの枠 */
.kd-press-inset:focus-visible {
  outline: 3px solid #0284C7;
  outline-offset: 3px;
}

4. 押したままになるボタン

1〜3は押している間だけへこみますが、オンとオフを切りかえるボタンは、オンの間ずっとへこんで見えるようにします。状態は aria-pressed（ボタンが押された状態かどうかを表す属性）に持たせ、CSSは [aria-pressed="true"] で見た目を変えます。押すたびに値を入れかえる短いJSを付けます。色だけでなく、印も ☆ から ★ に変えています。

HTML
<button type="button" class="kd-press-toggle" aria-pressed="false">お気に入り</button>
CSS
.kd-press-toggle {
  padding: 13px 24px;
  border: 2px solid #0369A1;
  border-radius: 8px;
  background: #FFFFFF;
  color: #0369A1;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.1s, color 0.1s;
}
/* 色だけに頼らず、印の形でも状態を見せる */
.kd-press-toggle::before {
  content: "☆ ";
}
/* 押された状態（aria-pressed="true"）の間は、へこんだまま */
.kd-press-toggle[aria-pressed="true"] {
  background: #0369A1;
  color: #FFFFFF;
  box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.35);
}
.kd-press-toggle[aria-pressed="true"]::before {
  content: "★ ";
}
/* キーボードで選んだときの枠 */
.kd-press-toggle:focus-visible {
  outline: 3px solid #0284C7;
  outline-offset: 3px;
}
JavaScript
document.querySelectorAll('.kd-press-toggle').forEach(function (b) {
  b.addEventListener('click', function () {
    var on = b.getAttribute('aria-pressed') === 'true';
    b.setAttribute('aria-pressed', on ? 'false' : 'true');
  });
});

仕組み：「押している間」だけ当たる :active

:active が当たる時間

:active は、ボタンなどが「押されている間」に当たる指定です。MDNによると、マウスの場合は、主ボタン（ふつうは左ボタン）を押しはじめたときに始まります。指を離すと外れるので、1〜3のへこみは、押している間だけ見えます。

ゆっくり押すと沈んだまま止まり、離すと元に戻ります。この「押しているあいだ沈む」感じが、実物のボタンに近い手ごたえになります。

transform で動かしても、まわりはずれない

1と2は、transform（要素を動かしたり大きさを変えたりする指定）を使っています。margin や top で下げると、まわりの文字やボタンまで押し出されて動くことがありますが、transform は見た目だけを動かすので、まわりの位置は変わりません。押した瞬間にページ全体がガタッと動くのを防げます。

影で「厚み」と「へこみ」を見せる

1は、ぼかしのない影を真下に4px付けて、ボタンの厚みに見せています。押したら4px下げて、影も0にします。下がる量と影の量をそろえるのがコツです。3は inset の影で、ボタンの内側の上が暗くなり、表面がくぼんだように見えます。

:hover と一緒に使うときの順番

マウスを乗せたときの :hover と一緒に使う場合、CSSは :hover を先、:active を後に書きます。MDNでは、リンクの指定は :link → :visited → :hover → :active の順（LVHAの順）に書くよう案内されています。逆に書くと、押している間もマウスが乗っているので、:hover の見た目に上書きされてしまいます。

オン・オフのボタンは aria-pressed で

4は、押している間だけでなく、オンの間ずっとへこんで見せるボタンです。MDNによると、ボタンに aria-pressed を付けると、オン・オフを切りかえるボタンとして読み上げソフトに伝わります。値は true（押されている）と false（押されていない）です。

MDNでは、状態が変わってもボタンの文字は変えないよう書かれています。「お気に入り」を押したら「お気に入り済み」に書きかえるのではなく、文字はそのままで、aria-pressed の値と見た目だけを変えます。

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

沈む深さ（1）

1px：ほぼ分からない
4px（見本）
10px：沈みすぎ

1pxだと、押したことがほとんど分かりません（左）。10pxだと、ボタンが大きく動きすぎて、押した場所からずれたように見えます（右）。ボタンの高さ50pxくらいなら、3〜5pxが目安です。

動く速さ（1）

0秒：一瞬で切りかわる
0.08秒（見本）
0.4秒：おくれて見える

transition（変化にかける時間）を0にすると、カチッと一瞬で切りかわります（左）。0.4秒にすると、指を離してもまだ沈んでいる途中のように見え、反応がおそいボタンに見えます（右）。押す動きは0.05〜0.1秒くらいの短さで十分です。

縮む割合（2）

0.98：ほぼ分からない
0.96（見本）
0.85：縮みすぎ

scale(0.98) では変化が小さすぎ、0.85 では縮みすぎて、ボタンが消えそうに見えます。0.95〜0.97くらいが、押したと分かって、しかも落ち着いた変化です。

変えるところ指定今回の値目安
沈む深さtranslateY4px3〜5px（下の影と同じ量）
縮む割合scale0.960.95〜0.97
動く速さtransition0.08〜0.1秒0.05〜0.1秒
内側の影box-shadow: inset0 3px 6pxぼかしは影のずれの2倍くらい

実際に押して試せる見本

ここにある4つは、コピペ用のコードと同じものです。マウスで押す、スマホで触れる、キーボードの Tab キーで選んでから Space キーを押す、の3つの方法で試せます。4は押すたびに ☆ と ★ が入れかわります。

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

キーボードで押したとき

Chromeで確かめると、Tab キーでボタンを選んで Space キーを押している間は :active が当たり、へこみました。Enter キーでは当たらず、へこまないまま押されました。キーボードで操作する人には、押したときのへこみより、今どのボタンを選んでいるかが分かることのほうが大切です。どの見本にも :focus-visible で青い枠を付けています。

動きを減らす設定の人には、一瞬で切りかえる

1と2では、OSの「動きを減らす」設定がオンの人には transition: none にして、ゆっくり動かさず一瞬で切りかえています。数pxの小さな動きですが、押したことが伝わる見た目の変化はそのまま残し、動いていく途中だけを省いています。

強制カラーモードでは、影が消える

Windowsの設定などで画面の色を決まった配色に変える「強制カラーモード」では、影（box-shadow）が表示されません。1の厚みや3のへこみは見えなくなりますが、ボタンとしては押せます。1は背景の色も消えるので、透明な枠線を入れておき、強制カラーモードでは枠として見えるようにしています。4は色が消えても、☆ と ★ の形でオン・オフが分かります。どれもChromeの強制カラーの再現で確かめました。

色の濃さ

1と4の青 #0369A1 は、白い文字との明るさの差が約5.9倍です。ふつうの大きさの文字で目安になる4.5倍を超えています。KAKERUブルーに近い #0284C7 だと約4.1倍なので、白い文字のボタンには使っていません。

やりすぎ注意

押したときの動きは、押した人が「押せた」と分かれば十分です。大きく沈む・跳ねる・揺れるなどの動きを足すと、反応がおそく見えたり、別のことが起きたように見えたりします。マウスを乗せたときの動きと組み合わせる場合も、乗せたときは小さく、押したときはさらに小さく、くらいにとどめます。

トミー

押したときの動きは、目立たせるためのものではありません。
「押せました」という返事です。小さく、速く、で十分です。

AIに頼むなら

押したときの動きは、Claudeなどの生成AIに頼むとすぐ作ってもらえます。そのときは「どのボタンか」「どのくらい動かすか」「配慮」まで伝えると、使えるコードになりやすくなります。

お問い合わせフォームの送信ボタンに、押している間だけ4px沈む動きをCSSで付けて。
下に同じ厚みの影を付け、押したら影を0にして。transition は0.08秒。
動きを減らす設定では transition をなくし、:focus-visible の枠も付けて。

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

  • margin や top で動かしていないか。まわりの部品まで押し出されて動くので、transform に置きかえます
  • outline: none でフォーカスの枠が消されていないか。見た目を整えるために消されることがあります。消すなら :focus-visible で代わりの枠を付けます
  • :hover より前に :active が書かれていないか。前に書くと、押したときの見た目が :hover に上書きされて見えません

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

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

使う場面

  • 申し込み・送信・購入など、押したあと画面が切りかわるまで少し時間がかかるボタン。1の沈むボタンで、押せたことをすぐ見せます
  • 入力欄の横の「検索」ボタン。まわりが動かない3の内側の影が合います
  • お気に入り・通知など、オン・オフが切りかわるボタン。4の形で、オンの間はへこんだままにします

使わない場面

  • 文章の中のリンク。押すとすぐ次のページに移るので、へこみを見せる時間がほとんどありません。色と下線で十分です
  • 1つのサイトで、いろいろな押し方を混ぜること。ボタンごとに沈んだり縮んだりすると、まとまりがなく見えます。サイトで1種類（オン・オフのボタンだけ別）に決めます
  • ボタンでないものに付けること。カードや画像が押したときにへこむと、ボタンだと思って何度も押されます。押して何かが起きるものだけに付けます
トミー

KAKERUなら、サイトの「押す」動きは1つに決めて、全部のボタンにそろえます。
どのボタンも同じ返事をするほうが、使う人は迷いません。

まとめ

  • :active は「押している間」だけ当たる指定。ボタンを下げる・縮める・内側に影を入れて、押した手ごたえを見せる
  • transform で動かすと、まわりの部品はずれない。下がる量と影の量をそろえると、厚みが沈んで見える
  • :hover と一緒に使うときは、:active を後に書く
  • オン・オフのボタンは aria-pressed で状態を持たせ、オンの間はへこんだままにする。文字は変えない
  • 動きは数px・0.1秒くらいまで。動きを減らす設定・キーボードのフォーカス・強制カラーモードにも気を配る

まずは1のコードをコピーして、サイトのいちばん押してほしいボタンで試してみてください。translateY(4px) と影の 4px を同じ数字のまま変えると、厚みの印象の違いがすぐ分かります。

参考にした資料

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

ふだんの制作の話や、作ったものの裏側は Instagram と X でも出しています。

関連記事

マウスを乗せると動くボタンをCSSだけで コピペで使える5種類と、スマホ・キーボードへの配慮
関連記事マウスを乗せると動くボタンをCSSだけで｜コピペで使える5種類と、スマホ・キーボードへの配慮
影の付け方をCSSで覚える。box-shadowの見本とコード
関連記事影の付け方をCSSで覚える｜box-shadowとdrop-shadowの使い分け、ふんわり影・重ね影のコピペ4種類
ふんわり光るボタン・脈打つボタン。使う数と動く回数の決め方
関連記事ふんわり光るボタン・脈打つボタンをCSSで作る｜コピペで使える4種類と、使う数・動く回数の決め方
動きが苦手な人への配慮をCSSで。ふつうの見え方と動きを減らす設定の見え方を並べた見本とコード
関連記事動きが苦手な人への配慮をCSSで（prefers-reduced-motion）｜止める・置きかえる・足す・JSで合わせる、書き方の型4つ

次に読む

無料の道具（登録なし）KAKERU TOOLS｜仕事の「ちょっと面倒」を、道具で減らす。WEB技術・次の回表（テーブル）をCSSで見やすく｜縞模様・スマホで横スクロール・見出しと左の列の固定、コピペ4種類と使いどころWEB技術・前の回区切り線をCSSで描きかえる｜hrで作る破線・両端が消える線・記号つき・波線、コピペ4種類と使いどころ
ボタンを押した瞬間のへこむ動き。:activeで沈む・縮む・押したままのボタンの見本とコード

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

CAPTCHA


ABOUTこの記事をかいた人

25歳からWEBの世界に携わり、WEBデザインから始めて、今はWEBシステムまで一貫して制作しています。問題点を洗い出し、改善を提案する中で、WEB・グラフィック・動画・システムを縦断して提案するのが得意です。

NEW POSTこのライターの最新記事