メイン＋サブの 2 つ並び CTA
主要操作と補助操作を横並びにした 2ボタンの組み合わせ です。 display:inline-flex と gap で並べ、 flex-wrap:wrap を指定しているため、画面幅が狭いと自動で縦積みに折り返します。
解説
主要操作と補助操作を横並びにした2ボタンの組み合わせです。display:inline-flex と gap で並べ、flex-wrap:wrap を指定しているため、画面幅が狭いと自動で縦積みに折り返します。塗りつぶしの dual-pri（メイン）と、枠線だけの dual-sec（サブ）で見た目の優先度に差をつけ、利用者がまず押すべきボタンを直感的に分からせるのが狙いです。CSS のみで、JavaScript は不要です。
使う場面
- 「無料で始める / 資料ダウンロード」のように主従のある2択
- 「申し込む / 後で見る」など、決定と保留を並べる場面
- 料金プランやヒーロー下の二系統の導線
サブボタンはホバーで背景が反転して塗りつぶしに変わります。色はメインの background、サブの border と文字色を変えるだけで調整できます。視覚的な優先度を保つため、メインとサブを同じ強さの色にしないことが大切です。button 要素なので、実際の遷移には onclick やフォーム送信を割り当てるか、リンクなら a に置き換えると良いでしょう。
使用例・適したシーン
- お問い合わせフォームの送信ボタン
- 資料ダウンロードの CTA
- ヒーローセクションの主要 CTA
- サブスク・申込ボタン
よくある質問
画面が狭いときボタンは縦に並びますか
はい。flex-wrap:wrap を指定しているため、横幅が足りないと自動で折り返して縦並びになります。
メインとサブの見分けはどう付けていますか
メインは塗りつぶし、サブは枠線だけのスタイルにして優先度を表現しています。色を変えるときも両者の強さに差を残すと分かりやすくなります。