押し込みの手応えトグル
「保存」「通知」「お気に入り」の 3 つのトグル。押している間だけ 0.96 倍に沈み、離すと弾んで戻る。切り替わった瞬間に navigator.vibrate があれば 10ms 震える。
プレビュー
クリック
操作クリック／タップで動きます。
デザインの要点
- 押下中の縮小は 0.96 倍まで。それ以上縮めると「壊れた」ように見え、色の変化と競合する
- 離したときの弾みは 1 回だけ。往復させると軽薄になる。cubic-bezier のオーバーシュートで十分
- 状態は aria-pressed に持ち、色・アイコンの塗り・ラベルの 3 つで伝える。色だけだと色覚特性で区別できない
- 振動は 10ms の短い 1 回。対応しない環境では何もしないので、機能の分岐は要らない
実装メモ
navigator.vibrate は Android Chrome 等で動き、iOS Safari では未定義です。未定義なら呼ばないだけなので機能分岐は不要です。押下中の縮小は :active でも書けますが、タッチでは :active の付き方がブラウザごとに揺れるため、pointerdown/up で明示的にクラスを付けています。
コード（コピーして使えます）
<div class="pst-card">
<p class="pst-head">この記事を</p>
<div class="pst-row">
<button class="pst-btn" type="button" aria-pressed="false" data-on="保存済み" data-off="保存">
<svg class="pst-ic" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round" aria-hidden="true"><path d="M6 3h12v18l-6-4-6 4z"/></svg>
<span class="pst-label">保存</span>
</button>
<button class="pst-btn" type="button" aria-pressed="true" data-on="通知オン" data-off="通知">
<svg class="pst-ic" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 8a6 6 0 0 0-12 0c0 6-3 7-3 7h18s-3-1-3-7"/><path d="M13.5 21a2 2 0 0 1-3 0"/></svg>
<span class="pst-label">通知オン</span>
</button>
<button class="pst-btn" type="button" aria-pressed="false" data-on="お気に入り済み" data-off="お気に入り">
<svg class="pst-ic" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round" aria-hidden="true"><path d="M12 20.5 4.5 13a4.5 4.5 0 0 1 7.5-4.9A4.5 4.5 0 0 1 19.5 13z"/></svg>
<span class="pst-label">お気に入り</span>
</button>
</div>
<p class="pst-status" id="pst-status" role="status" aria-live="polite">通知をオンにしています</p>
</div>