ソフトパステルボタン
淡いパステル地に角丸 border-radius:999px の丸み、そして下方向に落とした box-shadow で「軽く浮いた」立体感を出したボタンです。押した感覚は :hover 時に translateY でボタンを少し下げ、同時に影を浅くすることで再現しています。
解説
淡いパステル地に角丸 border-radius:999px の丸み、そして下方向に落とした box-shadow で「軽く浮いた」立体感を出したボタンです。押した感覚は :hover 時に translateY でボタンを少し下げ、同時に影を浅くすることで再現しています。色はビビッドではなく彩度を落としたトーンでまとめ、子ども向け・ウェルネス・カフェなど柔らかい世界観のサイトに馴染みます。
どんなサイトに合うか
- 育児・教育サービスの申し込みボタン
- ヨガやサロンなどリラックス系の予約導線
- パステル基調のカフェ・スイーツ店の注文ボタン
色を変えるときは background と影の box-shadow を同系統で揃えると、押し込みの立体感が崩れません。文字色は背景より一段濃くすると可読性が保てます。transition は短めの .25s で軽快に反応します。注意点として、淡い背景に淡い文字を重ねるとコントラスト不足になりやすいので、ボタン文言の色は十分に濃く取り、フォーカス時の枠線も確保しておくと操作性が高まります。
使用例・適したシーン
- お問い合わせフォームの送信ボタン
- 資料ダウンロードの CTA
- ヒーローセクションの主要 CTA
- サブスク・申込ボタン
よくある質問
ボタンの色を別のパステルに変えるには。
background を別の淡い色に差し替え、その色を一段濃くしたものを box-shadow に使うと、押し込みの立体感を保ったまま色だけ変えられます。文字色も背景より濃く取ると読みやすさが保てます。
JavaScript は使っていますか。
使っていません。ホバー時の沈み込みも影の変化もすべて CSS の transition と transform で実現しているため、貼り付けるだけで動きます。