円形アイコンボタン群
円形に整えたアイコン専用のボタンを横並びにしたセットです。各ボタンは border-radius:50% で正円にし、中にインラインの svg アイコンを置いています。ホバーすると背景と文字色が反転し、 translateY でわずかに浮き上がり、影が落ちることで押せることが直感的に伝わります。
解説
円形に整えたアイコン専用のボタンを横並びにしたセットです。各ボタンは border-radius:50% で正円にし、中にインラインの svg アイコンを置いています。ホバーすると背景と文字色が反転し、translateY でわずかに浮き上がり、影が落ちることで押せることが直感的に伝わります。アイコンは外部フォントに頼らずSVGを直接埋め込んでいるため、単体でそのまま動きます。
SNSへのリンク、いいねや共有などの操作、ツールバーの機能アイコンなど、文字ラベルを省いて省スペースに並べたい場面に向いています。サイズが揃った円が並ぶことで、整然とした印象を与えます。
カスタマイズとアクセシビリティ
- ボタンの大きさは
widthとheight、間隔はgapで調整します。 - ホバー時の色や浮き具合は背景色と
translateY、box-shadowで変えられます。 - アイコンだけだと役割が伝わらないため、各ボタンに
aria-labelを付けて何のボタンか読み上げられるようにします。
使用例・適したシーン
- お問い合わせフォームの送信ボタン
- 資料ダウンロードの CTA
- ヒーローセクションの主要 CTA
- サブスク・申込ボタン
よくある質問
アイコンを別のものに差し替えられますか。
できます。ボタン内のsvg要素を別のインラインSVGに入れ替えるだけです。fillやstrokeにcurrentColorを使っておくと、ホバー時の色反転に自動で追従します。
ボタンの大きさや並びの間隔を変えられますか。
変えられます。大きさはボタンのwidthとheight、ボタン同士の間隔は親要素のgapで調整します。すべて同じ値にすると円が綺麗に揃います。