ニューモーフィズム凹ボタン（押し込まれた状態）
こちらは box-shadow に inset を付け、影を 内側 に落とすことで「すでに押し込まれている」状態を常時表現したニューモーフィズムの凹ボタンです。前述の凸ボタンが浮き出ているのに対し、こちらは面にめり込んで見えるため、 選択中・ON の状態 を視覚的に伝えるのに向いています。
解説
こちらは box-shadow に inset を付け、影を内側に落とすことで「すでに押し込まれている」状態を常時表現したニューモーフィズムの凹ボタンです。前述の凸ボタンが浮き出ているのに対し、こちらは面にめり込んで見えるため、選択中・ON の状態を視覚的に伝えるのに向いています。背景とボタンを同色（#e0e5ec）にして、内側の暗い影と明るい影だけで凹みを描いています。
使いどころ
- タブやトグルで「今これが選ばれている」と示したいとき
- フィルターやカテゴリ選択の ON/OFF 表現
- セグメントコントロールの選択済みボタン
凸ボタン（未選択）とこの凹ボタン（選択中）をペアで切り替えると、押された感覚が自然に伝わる選択 UI になります。注意点として、凹みは色のコントラストだけで状態を示すため、色覚に配慮してテキストやアイコンの濃淡も変えると親切です。フォーカス可視化のため、アウトラインを完全に消さないようにしてください。
使用例・適したシーン
- お問い合わせフォームの送信ボタン
- 資料ダウンロードの CTA
- ヒーローセクションの主要 CTA
- サブスク・申込ボタン
よくある質問
凸ボタンとどう使い分けますか
浮き出る凸ボタンを未選択、内側に沈む凹ボタンを選択中として対にすると、押した状態が直感的に伝わります。トグルやタブの選択表現に向いています。
凹みの深さは調整できますか
できます。inset に続く 6px 6px 12px の数値を大きくすると影が濃く深く沈んで見え、小さくすると浅くなります。背景と同色のまま影の2色だけを濃淡で調整するのがコツです。