SVG アイコン + テキスト CTA
このボタンは、左にインライン SVG アイコン、右にテキストを並べた「何のボタンか一目でわかる」CTA です。レイアウトは display:inline-flex と align-items:center でアイコンと文字を縦中央でそろえ、 gap:10px で間隔を空けています。
解説
このボタンは、左にインライン SVG アイコン、右にテキストを並べた「何のボタンか一目でわかる」CTA です。レイアウトは display:inline-flex と align-items:center でアイコンと文字を縦中央でそろえ、gap:10px で間隔を空けています。アイコンは画像ファイルではなく stroke="currentColor" の SVG なので、文字色を変えるだけでアイコンの色も追従します。ホバー時は transform:translateY(-2px) でわずかに浮き、box-shadow が伸びて押せる手応えを伝えます。
使う場面
- 「今すぐ予約する」「カートに入れる」など意味を明確にしたい主要 CTA
- カレンダー・ダウンロード・送信など、アイコンで動作を補強したい操作
- 申込や購入の最終ボタンなど、迷わせたくない場面
アイコンを差し替えるときは path を別の SVG に入れ替えるだけです。色は background と、文字・アイコン共通の color で決まります。サイズは .icon-cta svg の width/height で調整します。SVG が単なる飾りなら aria-hidden="true" を付け、意味を持つなら隣のテキストで内容が伝わるようにすると、スクリーンリーダー利用者にも親切です。
使用例・適したシーン
- お問い合わせフォームの送信ボタン
- 資料ダウンロードの CTA
- ヒーローセクションの主要 CTA
- サブスク・申込ボタン
よくある質問
アイコンを別のものに変えられますか？
変えられます。SVG の中の path 要素を別のアイコンのパスに差し替えるだけです。stroke=currentColor のままにしておけば、文字色を変えたときアイコンの色も自動でそろいます。
アイコンと文字の間隔を広げたいです。
.icon-cta の gap の値(初期 10px)を大きくすると間隔が広がります。アイコン自体の大きさは .icon-cta svg の width と height(初期 18px)で調整してください。