グラデーション枠ボタン
グラデーション枠ボタンは、枠線だけが鮮やかなグラデーションで光り、中身はサイト背景と同じ色という二層構造のボタンです。実装の肝は padding テクニックで、外側の要素にグラデーション背景を敷き、 span 側に背景色を塗ることで「外周だけグラデが見える」状態を作ります。
解説
グラデーション枠ボタンは、枠線だけが鮮やかなグラデーションで光り、中身はサイト背景と同じ色という二層構造のボタンです。実装の肝は padding テクニックで、外側の要素にグラデーション背景を敷き、span 側に背景色を塗ることで「外周だけグラデが見える」状態を作ります。外側の padding:2px がそのまま枠の太さになります。ホバーすると span の背景が透明になり、内側までグラデーションが満ちる演出です。
使う場面
- ダークな背景のサイトで、枠線だけを光らせたいスタイリッシュな CTA
- 「Get in Touch」「お問い合わせ」など上品に目立たせたいボタン
- テック系・SaaS など先進的な印象を出したいデザイン
中身の span の background は必ずサイトの背景色と一致させてください。ここがズレると枠だけ浮いて見えます。枠を太くするなら外側の padding を 2px から増やし、グラデの方向や色は linear-gradient(135deg, ...) の角度と色で自由に変えられます。CSS だけで動き、JavaScript は不要です。文字色とグラデの明度差を保ち、ホバー時に背景が透けても読める配色にしておくと安心です。
使用例・適したシーン
- お問い合わせフォームの送信ボタン
- 資料ダウンロードの CTA
- ヒーローセクションの主要 CTA
- サブスク・申込ボタン
よくある質問
枠を太くしたいときはどこを変えますか？
外側のボタン要素の padding(初期値 2px)を 3px や 4px に増やすと枠が太くなります。padding がそのまま枠の見える幅になる仕組みです。
中身がサイト背景から浮いて見えます。
内側の span の background をサイトの実際の背景色とまったく同じ値に合わせてください。背景が画像やグラデーションの場合はこの手法だと馴染みにくいため、単色背景の上で使うのが向いています。