アイコン専用円形ボタン
ラベルを持たず、アイコンだけで機能を表す 円形のアイコンボタン です。 border-radius:50% で正円にし、 display:grid;place-items:center で中のアイコンを上下左右の中央に揃えています。
解説
ラベルを持たず、アイコンだけで機能を表す円形のアイコンボタンです。border-radius:50% で正円にし、display:grid;place-items:center で中のアイコンを上下左右の中央に揃えています。アイコンはインライン SVG で stroke:currentColor を使うため、ボタンの文字色を変えるだけでアイコンの色も連動します。重要なのは aria-label="お気に入り" が付いている点で、文字がなくても支援技術に役割が伝わります。
使う場面
- お気に入り・共有・設定などの補助的な操作
- ツールバーやカード右上の省スペースな操作ボタン
- テキストを置くほどではない繰り返し操作のアイコン群
ホバー時は枠線と文字色が変わり、translateY(-2px) でわずかに浮きます。色やサイズは width・height と color を変えるだけで調整可能です。アイコンのみのボタンは意味が伝わりにくいので、aria-label を必ず付け、title 属性やツールチップで補足するとさらに親切です。タッチ操作を考えると44px前後の大きさを保つと押し間違いを減らせます。
使用例・適したシーン
- お問い合わせフォームの送信ボタン
- 資料ダウンロードの CTA
- ヒーローセクションの主要 CTA
- サブスク・申込ボタン
よくある質問
アイコンだけだと何のボタンか分かりにくくありませんか
そのため各ボタンに aria-label を付けて役割を伝えています。視覚的にも title 属性やツールチップで補足すると安心です。
ボタンの大きさや色は変更できますか
できます。.ic-btn の width と height でサイズ、color と border-color で配色を調整できます。アイコンは currentColor 連動なので文字色を変えれば一緒に変わります。