グラスモーフィズム ボタン
グラスモーフィズムボタンは、半透明の白背景（ rgba(255,255,255,.18) ）に backdrop-filter: blur(10px) を重ね、後ろの景色をすりガラス越しに透かして見せるスタイルです。薄い白の枠線が縁の光沢を補い、ガラス板のような質感を作ります。
解説
グラスモーフィズムボタンは、半透明の白背景（rgba(255,255,255,.18)）に backdrop-filter: blur(10px) を重ね、後ろの景色をすりガラス越しに透かして見せるスタイルです。薄い白の枠線が縁の光沢を補い、ガラス板のような質感を作ります。ホバーで背景の不透明度を上げつつ translateY(-2px) でわずかに浮かせ、操作に反応する軽さを添えています。CSS のみで動き、-webkit-backdrop-filter も併記して Safari に対応しています。
こんなときに
- グラデーションや写真を敷いたヒーロー上の CTA
- 動画背景に重ねる透明感のあるボタン
- モダンなアプリのオーバーレイ UI
この効果は背景に色や柄があってこそ映えるため、無地の白背景に置くと存在感が消えます。ぼかし量は blur() の数値で調整可能。注意点として、backdrop-filter は描画負荷がやや高く、要素を多用するとスクロールが重くなることがあります。透過文字は背景次第で読みにくくなるので、コントラストの確保を忘れないでください。
使用例・適したシーン
- お問い合わせフォームの送信ボタン
- 資料ダウンロードの CTA
- ヒーローセクションの主要 CTA
- サブスク・申込ボタン
よくある質問
白い無地の背景だとガラス感が出ません
backdrop-filter は背後にある色や柄をぼかして見せる効果なので、無地だとぼかす対象がなく透明な板にしか見えません。グラデーションや写真、動画など模様のある背景に重ねると、すりガラスらしい質感が出ます。
対応していないブラウザはありますか
最新の Chrome・Safari・Firefox・Edge では動作します。Safari 向けに -webkit-backdrop-filter も併記済みです。ごく古いブラウザでは効果が無視され、半透明の白いボタンとして表示されますが、操作性自体は損なわれません。