KAKERU Designing トミー（末富将也）

SNSのアイコンを丸いボタンに並べるCSS｜マウスを乗せると各SNSの色に変わる4種類

SNSのアイコンを丸いボタンに並べ、マウスを乗せると色が変わる見本とコード

ホームページのフッターやプロフィール欄によくある、InstagramやXのアイコンが丸いボタンになって並んでいる部分。マウスを乗せると、ボタンがそれぞれのSNSの色に変わる――この「丸く並べて、乗せたら色」は、CSSの数行で作れます。画像を用意しなくても、アイコンの線の色や背景をCSSで自由に変えられる形です。

使いどころは、フッターやプロフィール欄で「ほかの場所でも発信しています」と、さりげなく案内したいときです。ただし、スマホではマウスを乗せる操作がないので、色が変わらなくても押せると分かる見た目にしておきます。

この記事の要点

  • border-radius: 50% で丸くし、display: flex で横に並べる。:hover で背景をSNSごとの色に変えると「乗せたら色」になる
  • 使いどころは、フッターやプロフィール欄で、ほかのSNSへさりげなく案内したいとき。ページの主役のボタンには使わない
  • アイコンだけのリンクには aria-label で名前をつける。押す場所は44px前後にし、キーボードで来たとき（:focus-visible）も同じ見た目にする
トミー

連載「WEBの技術」の60回目です。
今回は、フッターでよく見るSNSのアイコンボタン。小さな部品ですが、名前のつけ方や押しやすさなど、気をつけることが意外と多い部品です。

完成見本：SNSのアイコンボタン4種類

どの見本も、左が元の状態、右がマウスを乗せたときです。右側は、マウスの矢印がボタンを順番に移っていく様子を自動でくり返しています。

COLOR1. マウスを乗せるとSNSの色になるフッターやプロフィール欄の基本に
OUTLINE2. 線の丸を、乗せると塗る白地が多い、すっきりしたサイトに
LIFT3. ふわっと持ち上がるボタンを少し目立たせたいときに
GROW4. まん中から色が広がる動きで遊びを出したいサイトに

※ アイコンは、見本用に形を簡単にしたもので、各社の公式のロゴではありません。サイトで使うときは、各社が配っている公式のロゴ素材を、各社の決まりに沿って使ってください。ボタンの色も、白い文字が読みやすいよう少し濃くしています。見本は読み上げソフトでは読まれないようにしています。動きを減らす設定にしている方には、止まって見えます。

コピペ用のコード

HTMLは、リンク（<a>）を箇条書き（<ul>）に入れて並べます。CSSは、まず1〜4で共通の「丸くして横に並べる」部分を入れ、そのあとに好きな形のCSSを足します。WordPressなら、HTMLは「カスタムHTML」のブロックやウィジェットに、CSSはテーマの「追加CSS」などに入れます。

1. マウスを乗せるとSNSの色になる

ボタンごとに --c という名前で色を持たせ、マウスを乗せたときに背景をその色に変えます。transition で、色が0.2秒かけて変わります。Tab キーで来たときも同じ見た目になるよう、:focus-visible にも同じ指定を書いています。

HTML
<ul class="kd-sns kd-sns--color">
  <li><a href="https://example.com/instagram" aria-label="Instagram" style="--c: #BE185D"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r="1" fill="currentColor" stroke="none"/></svg></a></li>
  <li><a href="https://example.com/x" aria-label="X" style="--c: #0F172A"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M5 4l14 16M19 4L5 20"/></svg></a></li>
  <li><a href="https://example.com/youtube" aria-label="YouTube" style="--c: #B91C1C"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><rect x="2.5" y="5.5" width="19" height="13" rx="4"/><path d="M10 9.5v5l4.5-2.5z" fill="currentColor"/></svg></a></li>
  <li><a href="https://example.com/line" aria-label="LINE" style="--c: #047857"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M12 4c-5 0-9 3.1-9 7 0 3.4 3 6.2 7.1 6.9L12 21l1.6-3.2C18 17.2 21 14.4 21 11c0-3.9-4-7-9-7z"/></svg></a></li>
</ul>
CSS（1〜4で共通）
/* 丸いボタンを横に並べる（1〜4で共通） */
.kd-sns {
  display: flex;
  flex-wrap: wrap;      /* 入りきらなければ折り返す */
  gap: 12px;            /* ボタンどうしの間 */
  margin: 0;
  padding: 0;
  list-style: none;     /* 箇条書きの点を消す */
}
.kd-sns a {
  display: grid;
  place-items: center;  /* アイコンを丸のまん中に */
  box-sizing: border-box;
  width: 44px;
  height: 44px;
  border-radius: 50%;   /* 正方形を丸にする */
  background: #E2E8F0;
  color: #0F172A;
  transition: background-color .2s, color .2s, border-color .2s;
}
.kd-sns svg {
  width: 22px;
  height: 22px;
}
CSS
/* マウスを乗せたとき・キーボードで来たとき */
.kd-sns--color a:hover,
.kd-sns--color a:focus-visible {
  background: var(--c);  /* ボタンごとの色 */
  color: #fff;
}

2. 線の丸を、乗せると塗る

ふだんは線だけの丸にして、マウスを乗せると中を塗ります。線は border で描いています。box-shadow で描く方法もありますが、画面の色を強制する設定では box-shadow が消えるため、線が残る border にしました。

HTML
<ul class="kd-sns kd-sns--line">
  <li><a href="https://example.com/instagram" aria-label="Instagram" style="--c: #BE185D"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r="1" fill="currentColor" stroke="none"/></svg></a></li>
  <li><a href="https://example.com/x" aria-label="X" style="--c: #0F172A"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M5 4l14 16M19 4L5 20"/></svg></a></li>
  <li><a href="https://example.com/youtube" aria-label="YouTube" style="--c: #B91C1C"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><rect x="2.5" y="5.5" width="19" height="13" rx="4"/><path d="M10 9.5v5l4.5-2.5z" fill="currentColor"/></svg></a></li>
  <li><a href="https://example.com/line" aria-label="LINE" style="--c: #047857"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M12 4c-5 0-9 3.1-9 7 0 3.4 3 6.2 7.1 6.9L12 21l1.6-3.2C18 17.2 21 14.4 21 11c0-3.9-4-7-9-7z"/></svg></a></li>
</ul>
CSS
/* ふだんは線だけ */
.kd-sns--line a {
  background: #fff;
  border: 2px solid #0F172A;
}
.kd-sns--line a:hover,
.kd-sns--line a:focus-visible {
  background: var(--c);
  border-color: var(--c);
  color: #fff;
}

3. ふわっと持ち上がる

色が変わるのに合わせて、ボタンを4pxだけ上に動かし、下に影を付けます。動きは transform で付けているので、まわりのボタンや文字は動きません。動きを減らす設定にしている人には、色だけが変わるようにしています。

HTML
<ul class="kd-sns kd-sns--lift">
  <li><a href="https://example.com/instagram" aria-label="Instagram" style="--c: #BE185D"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r="1" fill="currentColor" stroke="none"/></svg></a></li>
  <li><a href="https://example.com/x" aria-label="X" style="--c: #0F172A"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M5 4l14 16M19 4L5 20"/></svg></a></li>
  <li><a href="https://example.com/youtube" aria-label="YouTube" style="--c: #B91C1C"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><rect x="2.5" y="5.5" width="19" height="13" rx="4"/><path d="M10 9.5v5l4.5-2.5z" fill="currentColor"/></svg></a></li>
  <li><a href="https://example.com/line" aria-label="LINE" style="--c: #047857"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M12 4c-5 0-9 3.1-9 7 0 3.4 3 6.2 7.1 6.9L12 21l1.6-3.2C18 17.2 21 14.4 21 11c0-3.9-4-7-9-7z"/></svg></a></li>
</ul>
CSS
/* 色に加えて、少し上へ */
.kd-sns--lift a {
  transition: background-color .2s, color .2s, transform .2s, box-shadow .2s;
}
.kd-sns--lift a:hover,
.kd-sns--lift a:focus-visible {
  background: var(--c);
  color: #fff;
  transform: translateY(-4px);
  box-shadow: 0 6px 12px rgba(15, 23, 42, .25);
}
/* 動きを減らす設定では、上へ動かさない */
@media (prefers-reduced-motion: reduce) {
  .kd-sns--lift a:hover,
  .kd-sns--lift a:focus-visible {
    transform: none;
  }
}

4. まん中から色が広がる

ボタンの中に、色の付いた丸（::before）を大きさ0で隠しておき、マウスを乗せると元の大きさまで広げます。overflow: hidden で、丸がボタンの外にはみ出さないようにしています。isolation: isolate は、色の丸をアイコンの下に置くための指定です。

HTML
<ul class="kd-sns kd-sns--grow">
  <li><a href="https://example.com/instagram" aria-label="Instagram" style="--c: #BE185D"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r="1" fill="currentColor" stroke="none"/></svg></a></li>
  <li><a href="https://example.com/x" aria-label="X" style="--c: #0F172A"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M5 4l14 16M19 4L5 20"/></svg></a></li>
  <li><a href="https://example.com/youtube" aria-label="YouTube" style="--c: #B91C1C"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><rect x="2.5" y="5.5" width="19" height="13" rx="4"/><path d="M10 9.5v5l4.5-2.5z" fill="currentColor"/></svg></a></li>
  <li><a href="https://example.com/line" aria-label="LINE" style="--c: #047857"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M12 4c-5 0-9 3.1-9 7 0 3.4 3 6.2 7.1 6.9L12 21l1.6-3.2C18 17.2 21 14.4 21 11c0-3.9-4-7-9-7z"/></svg></a></li>
</ul>
CSS
/* 色の丸を、ボタンの中に隠しておく */
.kd-sns--grow a {
  position: relative;
  overflow: hidden;
  isolation: isolate;    /* 色の丸をアイコンの下に置く */
}
.kd-sns--grow a::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 50%;
  background: var(--c);
  transform: scale(0);   /* 大きさ0で見えない */
  transition: transform .3s ease-out;
}
.kd-sns--grow a:hover::before,
.kd-sns--grow a:focus-visible::before {
  transform: scale(1);
}
.kd-sns--grow a:hover,
.kd-sns--grow a:focus-visible {
  color: #fff;
}
@media (prefers-reduced-motion: reduce) {
  .kd-sns--grow a::before {
    transition: none;
  }
}

HTMLの href を、自分のアカウントのURLに書きかえて使います。style="--c: …" の色も、好きな色に変えられます。

応用：実際にマウスを乗せて試す

上の見本は自動で動かしていますが、こちらは本物の :hover で動きます。パソコンならマウスを乗せて、キーボードならTabキーで順番に選んで、色の変わり方を比べてみてください（押してもほかのページへは移りません）。

1
2
3
4

仕組み：丸・横並び・色の3つに分ける

正方形に border-radius: 50% で丸くなる

border-radius は角の丸みを決める指定です。幅と高さが同じ正方形に 50%（辺の長さの半分）を指定すると、ちょうど円になります。アイコンを円のまん中に置くのは display: grid と place-items: center の2行です。

並べるのは flex、すき間は gap

<ul> に display: flex を指定すると、中の <li> が横に並びます。ボタンどうしの間は gap で決めます。flex-wrap: wrap を入れておくと、ボタンが増えて入りきらないときに次の行へ折り返すので、スマホの狭い幅でも横にはみ出しません。list-style: none は、箇条書きの点を消す指定です。

色はボタンごとに –c で持たせる

HTMLの style="--c: #BE185D" は、そのボタンだけで使える「色の入れもの」（カスタムプロパティ）です。CSSでは var(--c) と書くと、その中の色が入ります。こうしておくと、CSSは1つのまま、ボタンごとにちがう色にできます。新しいSNSを足すときも、HTMLに1行足して色を書くだけで済みます。

アイコンの色は currentColor でそろえる

SVGのアイコンには stroke="currentColor" と書いています。currentColor は「今の文字の色」という意味なので、CSSでボタンの color を白に変えると、アイコンの線も白になります。アイコンの画像を2枚用意して切りかえる必要はありません。

数値を変えるとどうなるか

ボタンの大きさ

共通のCSSの width と height を変えて並べました（アイコンの大きさも合わせて変えています）。

32px
44px
56px

32pxは、パソコンで見るとすっきりしていますが、スマホを指で押すには小さめです。W3Cのアクセシビリティの基準（WCAG 2.2）では、押す場所は少なくとも24×24px、より高い基準では44×44px以上とされています。KAKERUでは44pxを基本にしています。

色が変わる速さ

1の形で、transition の長さだけを変えて並べました。

0秒（すぐ）
0.2秒
0.8秒

0秒は、すぐに色が切りかわり、少し硬い印象です。0.8秒になると、マウスを動かしたあとに色が遅れてついてくる感じが出ます。何度も乗せる部品なので、0.2秒前後がちょうどいい長さです。

スマホ・見る人への配慮

アイコンだけのリンクには名前をつける

アイコンだけのリンクは、画面に文字がないので、読み上げソフトでは何のリンクか伝わりません。コードでは aria-label="Instagram" で名前をつけ、SVGには aria-hidden="true" をつけて、アイコンの図そのものは読まないようにしています。

キーボードで来たときも同じ見た目に

マウスを使わず、Tabキーでリンクを順に選ぶ人もいます。コードでは :hover と同じ指定を :focus-visible（キーボードなどで選んだとき）にも書いているので、Tabキーで来たときもボタンに色がつきます。

スマホでは「乗せる」がない

MDNによると、タッチ画面では :hover が当てはまらなかったり、触った後もしばらく残ったりと、ブラウザによって動きがちがいます。乗せたときの色は「おまけ」と考え、元の状態のままでも押せるボタンだと分かる見た目にしておきます。1〜4のどれも、元の状態で丸の背景か線が見えるようにしています。

画面の色を強制する設定では、線が残る形に

Windowsのコントラスト テーマのように、画面の色を強制する設定では、MDNによると box-shadow（影）が消えます。影だけでボタンの形を見せていると、丸が見えなくなります。2の線は border で描いているので、この設定でも丸が残ります。

動きを減らす設定

3と4は、ボタンが上へ動いたり、色が広がったりします。動きを減らす設定（prefers-reduced-motion: reduce）の人には、3は上へ動かさず色だけ、4は広がらずにすぐ色がつくようにしています。

やりすぎ注意

ボタンを回転させる、大きくはずませる、といった動きは、フッターの小さな部品には目立ちすぎます。また、SNSのボタンを10個も並べると、どれも押されにくくなります。実際に更新しているSNSだけに絞るのがおすすめです。

AIに頼むなら

Claudeなどの生成AIに頼むときは、「SNSのアイコンを丸く並べて」だけでなく、大きさ・色・読み上げ・キーボード操作まで伝えると、手直しが減ります。

フッターに置く、SNSのアイコンボタンを作って。InstagramとXとYouTube。
44pxの丸で横に並べ、マウスを乗せると各SNSの色に。:focus-visible も同じ見た目に。
リンクには aria-label で名前をつけて。

AIが出したコードは、そのまま使う前に、次の3つを確かめます。

  • リンクに名前があるか。アイコンだけのリンクに aria-label などの名前がないと、読み上げソフトでは「リンク」としか伝わりません
  • キーボードで選んだときに、どこにいるか分かるか。Tabキーで順に選び、色や枠がつくかを確かめます。outline: none だけが書かれていたら注意します
  • スマホ幅ではみ出さないか、押しやすいか。スマホの幅で見て、ボタンが小さすぎないか、横にはみ出していないかを見ます。アイコンの読み込みに大きな外部ライブラリを足していないかも確かめます

KAKERUならこう使う／使わない

最後に、作り手としての判断です。

使う場面

  • フッターの「SNSでも発信しています」の案内。1か2の形で、文字は入れずにアイコンだけ並べます
  • スタッフ紹介やプロフィール欄。人ごとのアカウントへの入口として、小さめに置きます
  • 記事の最後のフォローの案内。読み終えた人に、次の行き先として静かに見せます

使わない場面

  • お問い合わせなど、いちばん押してほしいボタンのとなり。SNSのボタンが目立つと、本当に押してほしいボタンから目がそれます
  • ほとんど更新していないSNSへの入口。押した先が止まったままだと、かえって印象が下がります
  • アイコンだけでは何か分かりにくいサービス。知られていないサービスは、アイコンの横に名前の文字を入れたほうが伝わります
トミー

KAKERUなら、2の線の丸を基本にして、フッターに3つまで。
色が変わるのは「おまけ」で、変わらなくても押せると分かることを先に考えます。

まとめ

  • 正方形に border-radius: 50% で丸く、display: flex と gap で横に並べる
  • ボタンごとの色は style="--c: …" に持たせ、:hover で var(--c) を背景にする
  • アイコンは currentColor で文字の色とそろえると、色の切りかえがCSSだけで済む
  • アイコンだけのリンクには aria-label。:focus-visible にも同じ見た目を
  • 大きさは44px前後、色が変わる速さは0.2秒前後。スマホでは「乗せる」がないことを前提に

まずは1のコードを、自分のアカウントのURLに書きかえて、フッターに置いてみてください。

参考にした資料

いずれも2026年11月15日に確認しました。内容は変わることがあります。最新の情報は各ページでご確認ください。

ふだんの制作の話や、作ったものの裏側は Instagram と X でも出しています。

関連記事

マウスを乗せると動くボタンをCSSだけで コピペで使える5種類と、スマホ・キーボードへの配慮
関連記事マウスを乗せると動くボタンをCSSだけで｜コピペで使える5種類と、スマホ・キーボードへの配慮
:focus-visible でTabキーのときだけボタンに枠を出した見本とコード
関連記事キーボード操作の枠をCSSで整える｜:focus-visibleでクリックでは出さずTabでは出す
display: grid と place-items: center で見出しを箱の真ん中に置いた見本とコード
関連記事ど真ん中に置くCSS｜flex・grid・align-contentで縦も横も中央寄せ、コピペで使える4種類

次に読む

無料の道具（登録なし）KAKERU TOOLS｜仕事の「ちょっと面倒」を、道具で減らす。WEB技術・前の回ページの切りかえをCSSでなめらかに｜View Transitionsの使い方と写真をつなげる方法
SNSのアイコンを丸いボタンに並べ、マウスを乗せると色が変わる見本とコード

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

CAPTCHA


ABOUTこの記事をかいた人

25歳からWEBの世界に携わり、WEBデザインから始めて、今はWEBシステムまで一貫して制作しています。問題点を洗い出し、改善を提案する中で、WEB・グラフィック・動画・システムを縦断して提案するのが得意です。

NEW POSTこのライターの最新記事