ジェルのようなボタン | かわいいフリー素材-ぱたぱたアニメ館

プルンとした質感が目を引く、「ジェルボタンの作り方（HTML/CSSコード）」を掲載しています。まずは、実際の動作を「小さいもの」ページで確認してみてください。また、標準の「ocean（ブルー）」に加えて、マリン、アクア、オレンジ、ブラックの色違いコードもあわせて紹介しています。

以下のデモ画面はクリックしても移動しないプレビュー用の設定です。お使いのスマートフォンによっては、タップした跡（フォーカス状態）が残って見える場合があります。

デモ：ocean

HTML


<div class="number-menu">
  <a href="リンク先のURL1.html" class="number-ocean">1</a>
  <a href="リンク先のURL2.html" class="number-ocean">2</a>
  <a href="リンク先のURL3.html" class="number-ocean">3</a>
  <a href="リンク先のURL4.html" class="number-ocean">4</a>
  <a href="リンク先のURL5.html" class="number-ocean">5</a>
  <a href="リンク先のURL6.html" class="number-ocean">6</a>
  <a href="リンク先のURL7.html" class="number-ocean">7</a>
</div>

CSS


/* ocean */
/* 1. ボタンを並べる土台の設定 */
.number-menu {
  display: inline-flex;  /* ボタンを横に並べる */
  gap: 6px;              /* ボタン同士の隙間（ここを増減して調整） */
  margin-top: 10px;      /* 上のコンテンツとの距離 */
}

/* 2. ボタン本体：色の設定 */
.number-menu a.number-ocean {
  margin: 0;
  width: 40px;              /* ボタンの幅 */
  height: 40px;             /* ボタンの高さ */
  display: flex;            /* 数字を中央に配置するため */
  align-items: center;      /* 縦方向の中央 */
  justify-content: center;  /* 横方向の中央 */
  position: relative;       /* 内部の「キラリ」の基準点にする */
  
  /* メインの青色：中心から外側へ広がるグラデーション */
  background: radial-gradient(circle at center, 
    rgba(100, 200, 255, 0.8) 0%,   /* 中心：明るい水色 */
    rgba(0, 120, 255, 0.7) 100%    /* 外側：濃いブルー */
  );

  border: 2px solid rgba(255, 255, 255, 1);       /* パキッとした白フチ */
  box-shadow: 0 6px 15px rgba(0, 120, 255, 0.4);  /* 外側の青い影 */
  
  color: #ffffff;            /* 数字の色（白） */
  font-weight: bold;         /* 数字を太字に */
  font-size: 21px;           /* 数字の大きさ */
  text-decoration: none;     /* リンクの下線を消す */
  border-radius: 50%;        /* 正円にする */

  /* 動きを滑らかにする（0.2秒かけて変化） */
  transition: all 0.2s ease;
  z-index: 1;                /* 数字を一番手前に出す */
}

/* 3. ボタン上部の「白いキラリ」：擬似要素beforeで作成 */
.number-menu a.number-ocean::before {
  content: "";               /* 空の要素を作る */
  position: absolute;        /* ボタン内の好きな場所に置く */
  top: 4px;                  /* 上からの位置 */
  left: 20%;                 /* 左からの位置 */
  width: 60%;                /* キラリの横幅 */
  height: 35%;               /* キラリの縦幅 */
  
  /* 上から下へ消えていく白グラデーション */
  background: linear-gradient(to bottom, 
    rgba(255, 255, 255, 0.8) 0%, 
    rgba(255, 255, 255, 0) 100%);
  
  border-radius: 50% 50% 40% 40%; /* 楕円形にして光の反射を再現 */
  z-index: 0;                     /* 数字に被らないよう、数字の後ろへ */
}

/* 4. マウスを乗せた時（ホバー）の演出 */
.number-menu a.number-ocean:hover {
  transform: scale(1.15);         /* 1.15倍に少し大きくする */
  
  /* 色をさらに濃く、鮮やかに塗りつぶす */
  background: radial-gradient(circle at center, 
    rgba(130, 220, 255, 0.9) 0%, 
    rgba(0, 100, 255, 0.9) 100%);
  
  /* 外側の影を強くして、発光しているように見せる */
  box-shadow: 0 0 20px rgba(0, 150, 255, 0.8);
  
  filter: brightness(1.2);        /* 全体をパッと明るく光らせる */
}

色違いの各コード

デモ：marine

HTML （クリックで表示）


<div class="number-menu">
  <a href="リンク先のURL1.html" class="number-marine">1</a>
  <a href="リンク先のURL2.html" class="number-marine">2</a>
  <a href="リンク先のURL3.html" class="number-marine">3</a>
  <a href="リンク先のURL4.html" class="number-marine">4</a>
  <a href="リンク先のURL5.html" class="number-marine">5</a>
  <a href="リンク先のURL6.html" class="number-marine">6</a>
  <a href="リンク先のURL7.html" class="number-marine">7</a>
</div>

CSS （クリックで表示）


/* marine */
.number-menu { display: inline-flex; gap: 6px; margin-top: 10px; }
.number-menu a.number-marine {
  margin: 0; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; position: relative;
  background: radial-gradient(circle at 50% 0%, #00aaff 0%, #004488 100%);
  border: 2px solid #fff; 
  box-shadow: inset 0 2px 5px rgba(255,255,255,0.8), inset 0 -3px 6px rgba(0,0,0,0.4), 0 5px 12px rgba(0,0,0,0.3);
  color: #fff; font-weight: bold; font-size: 21px; text-decoration: none; border-radius: 50%;
  transition: all 0.2s ease; z-index: 1;
}
.number-menu a.number-marine::before {
  content: ""; position: absolute; top: 2px; left: 20%; width: 60%; height: 35%;
  background: linear-gradient(to bottom, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.1) 100%);
  border-radius: 50% 50% 40% 40%; z-index: 0;
}
.number-menu a.number-marine:hover {
  transform: scale(1.1); 
  filter: brightness(1.1);
  background: radial-gradient(circle at center, rgba(0, 170, 255, 0.9) 0%, rgba(0, 68, 136, 0.9) 100%);
  box-shadow: inset 0 2px 8px rgba(255,255,255,0.5), 0 5px 20px rgba(0, 50, 150, 0.7);
}

デモ：aqua

HTML （クリックで表示）


<div class="number-menu">
  <a href="リンク先のURL1.html" class="number-aqua">1</a>
  <a href="リンク先のURL2.html" class="number-aqua">2</a>
  <a href="リンク先のURL3.html" class="number-aqua">3</a>
  <a href="リンク先のURL4.html" class="number-aqua">4</a>
  <a href="リンク先のURL5.html" class="number-aqua">5</a>
  <a href="リンク先のURL6.html" class="number-aqua">6</a>
  <a href="リンク先のURL7.html" class="number-aqua">7</a>
</div>

CSS （クリックで表示）


/* aqua */
.number-menu { display: inline-flex; gap: 6px; margin-top: 10px; }
.number-menu a.number-aqua {
  margin: 0; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; position: relative;
  background: radial-gradient(circle at center, #70e1ff 0%, #0090d0 100%);
  border: 2px solid #fff; box-shadow: 0 6px 15px rgba(0, 144, 208, 0.4);
  color: #fff; font-weight: bold; font-size: 21px; text-decoration: none; border-radius: 50%;
  transition: all 0.2s ease; z-index: 1;
}
.number-menu a.number-aqua::before {
  content: ""; position: absolute; top: 4px; left: 20%; width: 60%; height: 35%;
  background: linear-gradient(to bottom, rgba(255,255,255,0.8), rgba(255,255,255,0));
  border-radius: 50% 50% 40% 40%; z-index: 0;
}
.number-menu a.number-aqua:hover {
  transform: scale(1.15); 
  filter: brightness(1.1); 
  background: radial-gradient(circle at center, rgba(160, 235, 255, 0.9) 0%, rgba(0, 144, 208, 0.9) 100%);
  box-shadow: 0 0 23px rgba(0, 204, 255, 0.5);
}

デモ：orange

HTML （クリックで表示）


<div class="number-menu">
  <a href="リンク先のURL1.html" class="number-orange">1</a>
  <a href="リンク先のURL2.html" class="number-orange">2</a>
  <a href="リンク先のURL3.html" class="number-orange">3</a>
  <a href="リンク先のURL4.html" class="number-orange">4</a>
  <a href="リンク先のURL5.html" class="number-orange">5</a>
  <a href="リンク先のURL6.html" class="number-orange">6</a>
  <a href="リンク先のURL7.html" class="number-orange">7</a>
</div>

CSS （クリックで表示）


/* orange */
.number-menu { display: inline-flex; gap: 6px; margin-top: 10px; }
.number-menu a.number-orange {
  margin: 0; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; position: relative;
  background: radial-gradient(circle at center, #ffb347 0%, #ff6600 100%);
  border: 2px solid #fff; box-shadow: 0 6px 15px rgba(255, 102, 0, 0.5);
  color: #fff; font-weight: bold; font-size: 21px; text-decoration: none; border-radius: 50%;
  transition: all 0.2s ease; z-index: 1;
}
.number-menu a.number-orange::before {
  content: ""; position: absolute; top: 4px; left: 20%; width: 60%; height: 35%;
  background: linear-gradient(to bottom, rgba(255,255,255,0.7), rgba(255,255,255,0));
  border-radius: 50% 50% 40% 40%; z-index: 0;
}
.number-menu a.number-orange:hover {
  transform: scale(1.15); filter: brightness(1.1) saturate(1.2);
  background: radial-gradient(circle at center, #ffcc80 0%, #ff4500 100%);
  box-shadow: 0 0 20px rgba(255, 69, 0, 0.8);
}

デモ：black

HTML （クリックで表示）


<div class="number-menu">
  <a href="リンク先のURL1.html" class="number-black">1</a>
  <a href="リンク先のURL2.html" class="number-black">2</a>
  <a href="リンク先のURL3.html" class="number-black">3</a>
  <a href="リンク先のURL4.html" class="number-black">4</a>
  <a href="リンク先のURL5.html" class="number-black">5</a>
  <a href="リンク先のURL6.html" class="number-black">6</a>
  <a href="リンク先のURL7.html" class="number-black">7</a>
</div>

CSS （クリックで表示）


/* black */
.number-menu { display: inline-flex; gap: 6px; margin-top: 10px; }
.number-menu a.number-black {
  margin: 0; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; position: relative;
  background: radial-gradient(circle at center, #444 0%, #000 100%);
  border: 2px solid #fff; 
  box-shadow: 0 0 1px rgba(255,255,255,0.5), 0 6px 15px rgba(0, 0, 0, 0.5);
  color: #fff; font-weight: bold; font-size: 21px; text-decoration: none; border-radius: 50%;
  transition: all 0.2s ease; z-index: 1;
}
.number-menu a.number-black::before {
  content: ""; position: absolute; top: 4px; left: 20%; width: 60%; height: 35%;
  background: linear-gradient(to bottom, rgba(255,255,255,0.9), rgba(255,255,255,0));
  border-radius: 50% 50% 40% 40%; z-index: 0;
}
.number-menu a.number-black:hover {
  transform: scale(1.15); filter: brightness(1.3);
  background: radial-gradient(circle at center, #888 0%, #000 100%);
}

★ このページのコードは、Gemini と Copilot の協力のもと、主に私自身の学習・備忘録（メモ）用として作成しています。複雑な機能や処理を含む部分については、公開前に私自身が入念な動作確認をしていますが、ご利用の際は、必ずご自身で動作確認と必要に応じた修正をお願いいたします。