CSS Tips | 超実務コアCSSテクニック：UIパーツ － 立体ボタン設計

Web APP CSS
スポンサーリンク

立体ボタンは「影・光・奥行き」で“触れる質感”を作る UI テクニック

平面的なボタンより、立体ボタンは 「押せそう」「触れそう」 という感覚を強く伝えます。 そのために必要なのは、 影（box-shadow）・光（グラデーション）・奥行き（transform） の3つ。

初心者でも迷わないように、 CSS と Tailwind CSS の両方で、例題を交えて丁寧に解説します。

立体ボタンの基本構造

影で“浮き上がり”、光で“丸み”、押し込みで“立体感”を作る

立体ボタンは次の3ステップで作れます。

  1. 下方向に影を落とす → 浮いて見える
  2. 上方向に光を入れる → 丸みが出る
  3. ホバーで少し持ち上げる → 触れる質感が出る

この3つを組み合わせるだけで、 「立体ボタンらしさ」が一気に完成します。

例1：最も基本的な立体ボタン（影＋光）

CSS 版

.btn-3d {
  background: linear-gradient(#3b82f6, #1e40af); /* 上が明るく下が暗い → 立体感 */
  color: #fff;
  padding: 0.7rem 1.6rem;
  border-radius: 999px;
  font-weight: 600;
  box-shadow: 0 6px 0 #1e3a8a; /* 下に濃い影を落とす */
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.btn-3d:active {
  transform: translateY(4px); /* 押し込まれる */
  box-shadow: 0 2px 0 #1e3a8a;
}
CSS
<button class="btn-3d">立体ボタン</button>
HTML

Tailwind 版

<button
  class="px-6 py-3 rounded-full font-semibold text-white
         bg-[linear-gradient(#3b82f6,#1e40af)]
         shadow-[0_6px_0_#1e3a8a]
         active:translate-y-[4px]
         active:shadow-[0_2px_0_#1e3a8a]
         transition">
  立体ボタン
</button>
HTML

深掘りポイント

影を「真下」に落とすことで、 ボタンが“浮いている”ように見えます。 押したときに影を薄くすることで、 「押し込まれた」感覚が自然に伝わります。

例2：ふんわり浮く“柔らかい立体ボタン”

CSS 版

.btn-soft {
  background: #3b82f6;
  color: #fff;
  padding: 0.7rem 1.6rem;
  border-radius: 999px;
  font-weight: 600;
  box-shadow:
    0 4px 12px rgba(0,0,0,0.25),
    inset 0 2px 4px rgba(255,255,255,0.4); /* 内側の光で丸みを出す */
  transition: transform 0.2s ease;
}

.btn-soft:hover {
  transform: translateY(-2px);
}
CSS

Tailwind 版

<button
  class="px-6 py-3 rounded-full font-semibold text-white bg-blue-500
         shadow-[0_4px_12px_rgba(0,0,0,0.25),inset_0_2px_4px_rgba(255,255,255,0.4)]
         hover:-translate-y-[2px]
         transition">
  ソフト立体ボタン
</button>
HTML

深掘りポイント

内側の光（inset shadow）を入れると、 ボタンの表面が丸く見えます。 これは「柔らかい立体感」を作るときの定番テクニックです。

例3：押し込まれる“ネオモーフィズム風”立体ボタン

CSS 版

.btn-neo {
  background: #e5e7eb;
  color: #111827;
  padding: 0.7rem 1.6rem;
  border-radius: 16px;
  font-weight: 600;
  box-shadow:
    6px 6px 12px #d1d5db,
    -6px -6px 12px #ffffff; /* 凹凸の影で立体感 */
  transition: box-shadow 0.2s ease;
}

.btn-neo:active {
  box-shadow:
    inset 6px 6px 12px #d1d5db,
    inset -6px -6px 12px #ffffff; /* 押し込まれた影 */
}
CSS

Tailwind 版

<button
  class="px-6 py-3 rounded-xl font-semibold text-slate-900 bg-slate-200
         shadow-[6px_6px_12px_#d1d5db,-6px_-6px_12px_#ffffff]
         active:shadow-[inset_6px_6px_12px_#d1d5db,inset_-6px_-6px_12px_#ffffff]
         transition">
  ネオモーフィズム
</button>
HTML

深掘りポイント

影を「両方向」に落とすことで、 ボタンが“浮き出ている”ように見えます。 押したときに inset に切り替えると、 「へこむ」立体感が自然に表現できます。

例4：グラデーション＋光沢の“高級感ボタン”

CSS 版

.btn-glossy {
  background: linear-gradient(#f97316, #ea580c);
  color: #fff;
  padding: 0.7rem 1.6rem;
  border-radius: 999px;
  font-weight: 600;
  position: relative;
  overflow: hidden;
}

.btn-glossy::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    rgba(255,255,255,0.6),
    rgba(255,255,255,0)
  );
  opacity: 0.4;
  transform: translateY(-50%);
}
CSS

Tailwind 版

<button
  class="relative overflow-hidden px-6 py-3 rounded-full font-semibold text-white
         bg-[linear-gradient(#f97316,#ea580c)]">
  <span class="absolute inset-0 bg-[linear-gradient(rgba(255,255,255,0.6),rgba(255,255,255,0))] opacity-40 -translate-y-1/2"></span>
  <span class="relative">光沢ボタン</span>
</button>
HTML

深掘りポイント

上部に白いグラデーションを重ねることで、 「光沢のある立体ボタン」が作れます。 LP のメイン CTA に向いています。

例5：影が伸びる“浮き上がりホバー”

CSS 版

.btn-float {
  background: #2563eb;
  color: #fff;
  padding: 0.7rem 1.6rem;
  border-radius: 999px;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-float:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0,0,0,0.35);
}
CSS

Tailwind 版

<button
  class="px-6 py-3 rounded-full font-semibold text-white bg-sky-600
         shadow-[0_4px_12px_rgba(0,0,0,0.25)]
         hover:-translate-y-[4px]
         hover:shadow-[0_12px_24px_rgba(0,0,0,0.35)]
         transition">
  浮き上がりボタン
</button>
HTML

深掘りポイント

影を大きくして、ボタンを少し持ち上げると 「ふわっと浮く」立体感が出ます。 ホバーアニメとして非常に人気のあるパターンです。

立体ボタン設計の重要ポイント

影は「方向」「濃さ」「距離」で印象が決まる

下に濃い影 → 浮いて見える 内側の影 → 丸みが出る 両方向の影 → ネオモーフィズム

影の設計が立体ボタンの本質です。

グラデーションは「上を明るく、下を暗く」

光は上から当たるので、 上が明るく下が暗いグラデーションが自然な立体感を作ります。

押し込みは「translateY と inset shadow」

押したときに translateY(◯px) box-shadow: inset ... を使うと、リアルな押し込み表現になります。

そのまま使える「万能立体ボタン」テンプレート（Tailwind）

<button
  class="px-6 py-3 rounded-full font-semibold text-white text-sm
         bg-[linear-gradient(#3b82f6,#1e40af)]
         shadow-[0_6px_0_#1e3a8a]
         active:translate-y-[4px]
         active:shadow-[0_2px_0_#1e3a8a]
         hover:-translate-y-[2px]
         transition">
  立体ボタン
</button>
HTML

このテンプレートは 「影・光・押し込み・浮き上がり」 すべて揃っているので、どんな UI にも使えます。

さいごに

立体ボタンは、 影・光・奥行きの3つをどう組み合わせるか がすべてです。

ほんの少しの影や動きで、 「押せそう」「触れそう」という感覚が生まれ、 UI の質感が一段上がります。

もしあなたが作っているボタン（LPのCTA、フォーム送信ボタンなど）があれば、 そのボタンをベースに“最適な立体感”を一緒に設計できます。

スポンサーリンク
タイトルとURLをコピーしました