TOUCH INTERACTION

Tap Feedback
Demo

スマホで「押した瞬間の反応」を返すパターン集。ボタンを実際にタップ（クリック）して比べられます。hoverが使えないタッチデバイスでは、:activeと短いtransitionが基本です。

Press Scale

押している間だけ少し縮む、いちばん汎用的なタイプ。CTAボタンの定番。CSSのみ。

:active { transform: scale(0.96); }

押している間だけ少し暗くなる。画像リンクやリスト項目など、形を変えたくない要素向け。CSSのみ。

:active { filter: brightness(0.92); }

浮いていたボタンの影が消えて沈む。「物理的に押した」感がいちばん強い。CSSのみ。

:active { box-shadow: none; translate: 0 3px; }

タップした位置から波紋が広がるMaterial Design風。触った場所が視覚化される。JSでタップ座標を取得。

pointerdown → span追加 → scaleで拡大

押して縮み、離した瞬間にぷるんと弾む。遊び心があり、かわいい系のデザインと相性がよい。離した検知にJSを少し使用。

pointerup → keyframesで戻りを弾ませる