グラスモーフィズムボタン
背景がすりガラス越しに透ける質感のボタン。カラフルな背景の上で映える。
プレビュー
ホバー
操作カーソルを乗せると動きます（スマホはタップ）。
仕様書
- 向く場面
- 写真・グラデーション背景の上に置くボタン
- ヒーロー画像上のCTA
- 背景を透かして軽く見せたい
- 避ける場面
- 無地の背景（すりガラスの意味がない）
- 文字コントラストが背景次第で不足する場所
- backdrop-filter 非対応環境への依存
- 構成要素
- 背景ステージ
- ボタン
- 半透明の縁
- 持っている状態
- 通常
- ホバー
- 押下中
- キーボード
Tab でボタンへ・Enter／Space で実行（button 標準）
- 支援技術
半透明背景では文字と背景のコントラスト 4.5:1 を実背景で確認する。hover と同じ変化を :active で返しタッチでも手応えがある。focus-visible は白の輪郭
- 動き
背景と transform 0.2s で 2px 浮く。押せることを示す。reduced-motion では即時
デザインの要点
- すりガラスは backdrop-filter: blur(8px) と白 15% の背景の組み合わせ。ぼかしだけだと背景の色がそのまま抜けて板に見えない
- 縁は白 45% の 1px 線。輪郭が無いと背景と溶け、ボタンの形が読めない
- ホバーは @media (hover: hover) で囲み、タッチには :active で同じ変化を返す。タッチでホバーを当てると押した後も浮いたまま残る
- 文字色は背景の一番明るい部分で測る。グラデーションの上では、位置によってコントラストが 4.5:1 を割る
コード（コピーして使えます）
<div class="glass-stage">
<button class="glass-btn">Glass Button</button>
</div>