クリックしたとき、ボタンが「沈む」「スタンプが押される」「インクが広がる」——視覚的なフィードバックが返ってくるボタンは、それだけで「ちゃんと動いている」という安心感を与えます。UI設計では「タクタイルフィードバック」と呼ばれる概念で、指先の触覚体験をスクリーン上で再現しようとするアプローチです。CTAボタンの「押した感覚」が弱いと、ユーザーは「送信できたのか分からない」と感じることがあります。
今回は :active 疑似クラスを軸にした、クリック時フィードバック系ボタンを5種類紹介します。沈む動きの基本形・チェックマークが弾けるスタンプ演出・インクが滲むような広がり・判子が押されてくる印鑑アニメーション・スマートフォンのタップを模倣した瞬間フラッシュ、と幅広いバリエーションです。JavaScriptは不要、CSSのみで実装しています。
Press Down（プレス・ダウン）
Josh W. Comeauが “Building a Magical 3D Button” で紹介した手法の基本形です。box-shadow: 0 6px 0 [下面色] でボタンに立体感（底面）を作り、:active 時に translateY(4px) と box-shadow の縦オフセットを縮小することで、本物のボタンが押し込まれるような体験を作ります。
実装の核心は沈む距離と影の高さを一致させること。translateY(4px) なら box-shadow のオフセットも 6px → 2px（差分4px）に揃えると、リアルな沈み込みになります。派手な演出はありませんが、どんなサイトのCTAボタンにも使える実用性の高い実装で、フォームの送信ボタン・購入ボタンにそのまま採用できます。
See the Pen Press Down by BaseKENT (@basekent) on CodePen.
調整方法
- 底面の色:
box-shadow: 0 6px 0 #1d4ed8の#1d4ed8を背景色より暗い色にしてください。darken相当の色を指定するのが基本です - 沈む深さ:
translateY(4px)とbox-shadowのオフセット差分を同じ値に保ちながら増減させてください。6px沈ませるならbox-shadowは0 8px 0→ active時0 2px 0になります - トランジション速度:
0.08sを0.05sにするとよりシャープなフィードバックに、0.15sにするとやわらかい沈み込みになります
Stamp Appear（スタンプ・アピア）
クリックすると ::after に設定した ✓ テキストが scale(0.3) → scale(1) で弾けるように現れ、ボタンのテキストが消えてチェックマークに差し替わります。cubic-bezier(0.34, 1.56, 0.64, 1) のオーバーシュートつきイージングが「ポンっ」と押される感触を演出しています。
フォーム送信・タスク完了・購入ボタンなど「何かが確定した」文脈に向いています。:active のみで動作するためJSなしで実装できますが、「押し続けている間だけ出現する」仕様なので、実プロジェクトでは送信完了後にJSでクラスを追加してチェックマークを固定する形に発展させると完成度が高まります。
See the Pen Stamp Appear by BaseKENT (@basekent) on CodePen.
調整方法
- スタンプの内容:
content: '✓'を'OK'や'Done'などテキストに変更できます。絵文字も有効です（'🎉'など） - 弾けの強さ:
cubic-bezier(0.34, 1.56, 0.64, 1)の第2引数（1.56）を大きくするとより大きくオーバーシュートします。2.5まで上げると大きく弾けます - テキストの切り替え速度:
opacity 0.06sを0.12sにするとテキストがゆっくりフェードアウトしてからチェックが現れます
Ink Bleed（インク・ブリード）
押すと ::before の要素が inset: 50% 50% → inset: 0 へ広がり、ボタン全体を塗り潰す演出です。border-radius: 50% → 4px の変化と組み合わせることで、ゴム印が押し付けられてインクが外に向かって滲み広がるような動きになります。
白背景×黒ボーダーのシンプルなボタンから、クリックで黒く塗り潰されるというコントラストが視覚的にはっきりしています。書類系・認証系・法律系のUIで使うと「確認した」「押印した」という感覚に合います。inset プロパティはChrome87+以降でサポートされており、2026年時点のモダンブラウザで問題なく動作します。
See the Pen Ink Bleed by BaseKENT (@basekent) on CodePen.
調整方法
- インクの色:
background: #1c1917を任意のカラーに変更してください。アクティブ時のテキスト色（color: #fff）もインク色に合わせて調整を - 広がる速さ:
transition: inset 0.22s easeの秒数を0.12sにすると素早い塗り潰しに、0.4sにするとじわじわと広がります - ボタンの形:
border-radius: 4pxを50pxにするとピルボタン形になります。::beforeのborder-radius: 4pxも同じ値に揃えてください
Approved Seal（アプルーブド・シール）
押している間、::after に設定した “APPROVED” テキストが rotate(-15deg) scale(1.5) blur(3px) → rotate(-15deg) scale(1) blur(0) と変化し、判子が斜めに押し付けられてくるような演出になります。filter: blur と transform を同時にトランジションさせることで、「焦点が合ってくる」動きが自然に出るのがポイントです。
グリーンの枠と文字でスタンプらしい見た目にし、ダーク背景に乗せることで視認性を高めています。「承認する」「確定する」系のアクションボタンにそのまま使えます。実プロジェクトでは APPROVED を SENT DONE PAID など用途に合わせて変更するだけで応用できます。
See the Pen Approved Seal by BaseKENT (@basekent) on CodePen.
調整方法
- スタンプのテキスト:
content: 'APPROVED'を'SENT''DONE''CONFIRMED'など用途に合わせて変更してください - 傾き角度:
rotate(-15deg)をrotate(-25deg)にするとより大きく傾いた印鑑になります。0degにすると正面から降りてきます - スタンプの色:
color: #22c55eとborder-color: #22c55eを同じ色で変更してください。赤（#ef4444）にすると「却下スタンプ」の演出にも使えます
Haptic Flash（ハプティック・フラッシュ）
filter: brightness(0.75) と transform: scale(0.96) を :active に当て、transition: 0.05s という超短時間で変化させます。デフォルトは border-radius: 100px のピル型ボタンで実装していますが、スマートフォンのタップ時にわずかに暗くなる視覚フィードバックをスクリーン上で再現したシンプルな手法自体は、どんな形状のボタンにも適用できます。
派手な演出はなく変化量も最小限ですが、「ちゃんと押した」という感覚はしっかり伝わります。大きなアニメーションを入れたくない場面——ナビゲーション・ピルボタン・タグフィルターなど——で有効です。トランジションが 0.05s と非常に短いため、素早く連打しても動きが詰まらず、UXとして自然な反応を保てます。
See the Pen Haptic Flash by BaseKENT (@basekent) on CodePen.
調整方法
- 暗化の強さ:
filter: brightness(0.75)の値を0.6にするとより暗く、0.85にすると控えめなフィードバックになります - 縮小量:
transform: scale(0.96)をscale(0.93)にするとより沈んだ感触に、scale(0.98)にするとほぼ感じない程度の微細な変化になります - ボタン形状:
border-radius: 100pxを8pxに変更するとピル型から角丸矩形になります。どんな形状のボタンにも適用できる汎用的な手法です
Unlock Your Creativity…
今回紹介したCSSカスタマイズは、ほんの一例に過ぎません。 Webデザインの可能性は、コードひとつで無限に広がります。
Ex-TORANOMAKIには、あなたのサイトを「他とは違う」存在にするためのCSSテクニックを多数紹介しています。 ありきたりなデザインでは満足できないなら、ぜひ他のカスタマイズもチェックしてみてください。
