アイコン付きボタンを作る方法【HTML/CSS・サンプルコード付き】

<!DOCTYPE html>
<html lang="ja">
<head>

  <!-- 文字コード -->
  <meta charset="UTF-8">

  <!-- スマートフォン対応 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- ページタイトル -->
  <title>アイコン付きボタン</title>

  <!-- CSSファイル -->
  <link rel="stylesheet" href="style.css">

</head>
<body>

  <!-- アイコン付きボタン一覧 -->
  <div class="icon-button_list">

    <!-- ホームボタン -->
    <a
      class="icon-button_link"
      href="#">

      <!-- ホームアイコン -->
      <svg
        class="icon-button_icon"
        viewBox="0 0 24 24"
        aria-hidden="true">
        <path d="M12 3 3 10h2v10h5v-6h4v6h5V10h2z"></path>
      </svg>

      ホーム

    </a>

    <!-- メールボタン -->
    <a
      class="icon-button_link"
      href="#">

      <!-- メールアイコン -->
      <svg
        class="icon-button_icon"
        viewBox="0 0 24 24"
        aria-hidden="true">
        <path d="M4 4h16v16H4z"></path>
        <path d="m4 6 8 7 8-7"></path>
      </svg>

      メール

    </a>

    <!-- ユーザーボタン -->
    <a
      class="icon-button_link"
      href="#">

      <!-- ユーザーアイコン -->
      <svg
        class="icon-button_icon"
        viewBox="0 0 24 24"
        aria-hidden="true">
        <path d="M12 3a4 4 0 1 1 0 8 4 4 0 0 1 0-8z"></path>
        <path d="M5 21c0-4 3.1-7 7-7s7 3 7 7"></path>
      </svg>

      ユーザー

    </a>

  </div>

</body>
</html>

/* ページ全体 */
body{
  margin:0; /* ブラウザ標準の外側余白を削除 */
  padding:40px 20px; /* 上下40px・左右20px。値を大きくすると画面端との間隔が広がる */
  background:#ffffff; /* ページ全体の背景色 */
  color:#111827; /* ページ全体の基本文字色 */
  font-family:sans-serif; /* ページ全体で使用するフォント */
}

/* アイコン付きボタン一覧 */
.icon-button_list{
  display:flex; /* 3つのボタンを横方向へ並べる */
  justify-content:center; /* ボタン一覧を中央へ配置 */
  flex-wrap:wrap; /* 横幅が足りない場合は折り返す */

  gap:16px;
  /* ボタン同士の間隔。
     値を大きくするとボタン同士の間隔が広がる。 */
}

/* アイコン付きボタン */
.icon-button_link{
  display:inline-flex; /* アイコンと文字を横方向へ配置 */
  align-items:center; /* アイコンと文字を上下中央へ揃える */
  justify-content:center; /* アイコンと文字をボタン中央へ配置 */

  gap:8px;
  /* アイコンと文字の間隔。
     値を大きくすると間隔が広がる。 */

  width:150px;
  /* 3つのボタンの横幅。
     値を大きくするとボタンが横に広がる。 */

  padding:14px 28px;
  /* 上下14px・左右28px。
     値を大きくするとボタンが大きくなる。 */

  border-radius:10px;
  /* ボタンの角丸。
     値を大きくすると丸みが強くなる。 */

  background:#2563eb; /* ボタンの背景色 */
  color:#ffffff; /* ボタンの文字色 */
  text-decoration:none; /* リンクの下線を消す */

  font-size:16px;
  /* ボタンの文字サイズ。
     値を大きくすると文字が大きくなる。 */

  font-weight:700; /* ボタンの文字を太字にする */
  box-sizing:border-box; /* paddingを横幅へ含める */
}

/* SVGアイコン */
.icon-button_icon{
  width:20px;
  /* アイコンの横幅。
     値を大きくするとアイコンが大きくなる。 */

  height:20px;
  /* アイコンの高さ。
     値を大きくするとアイコンが大きくなる。 */

  flex-shrink:0; /* アイコンが縮まないようにする */
  fill:none; /* SVG内部を塗りつぶさない */
  stroke:currentColor; /* ボタンの文字色と同じ色を使用 */

  stroke-width:2;
  /* SVG線の太さ。
     値を大きくするとアイコンの線が太くなる。 */

  stroke-linecap:round; /* SVG線の端を丸くする */
  stroke-linejoin:round; /* SVG線の接続部分を丸くする */
}

/* 画面幅640px以下 */
@media (max-width:640px){

  /* アイコン付きボタン一覧 */
  .icon-button_list{
    flex-direction:column; /* ボタンを縦方向へ並べる */
    align-items:center; /* ボタンを中央へ配置 */
  }

}