ゴースト（半透明）ボタン
ゴーストボタンは、塗りつぶしを持たず背景がうっすら透けて見える半透明のボタンです。背景に rgba(255,255,255,.18) という薄い白を敷き、 backdrop-filter:blur(8px) で背後の写真やグラデーションをぼかして「すりガラス」のような質感を出しています。
解説
ゴーストボタンは、塗りつぶしを持たず背景がうっすら透けて見える半透明のボタンです。背景に rgba(255,255,255,.18) という薄い白を敷き、backdrop-filter:blur(8px) で背後の写真やグラデーションをぼかして「すりガラス」のような質感を出しています。細い白枠 border で輪郭を保ちつつ、写真の世界観を壊さないのが特徴です。ホバー時には transition で背景を白に、文字色を濃色に切り替え、はっきり押せる状態へ変化します。
使う場面
- ヒーロー画像の上に重ねるサブ CTA(「View Gallery」「詳しく見る」など)
- 主役ボタンと差をつけたい第二候補の操作
- 写真やムービー背景のランディングページ
カスタマイズの要点は、敷く背景が暗い写真なら白系、明るい写真なら黒系の半透明にして文字の可読性を確保することです。透け具合は .18 の数値で調整できます。backdrop-filter は一部の古い環境で効かないため、-webkit- 付きを併記し、効かない場合でも枠と文字で読めるようにしておくと安全です。透過した状態は文字とのコントラストが下がりやすいので、最低限の濃さは必ず確認しましょう。
使用例・適したシーン
- お問い合わせフォームの送信ボタン
- 資料ダウンロードの CTA
- ヒーローセクションの主要 CTA
- サブスク・申込ボタン
よくある質問
明るい背景写真の上だと文字が読みにくくなります。
背景に敷く半透明色を白系から黒系の rgba(0,0,0,.25) などに変え、文字色を白にすると明るい写真でも読みやすくなります。枠線の色も背景に応じて濃淡を調整してください。
ぼかし(backdrop-filter)が効かないブラウザがあります。
古いブラウザでは backdrop-filter が無視されることがあります。その場合でも半透明背景と白枠で形は保たれるため致命的ではありませんが、ぼかし前提で文字色を決めず、ぼかしなしでも読める配色にしておくと安全です。