CSSで実現する「ぷるん」とした立体感。同系色の影で魅せるボタンの作り方を徹底解説

Webサイトのデザインで、ボタンはユーザーの目を引く大切なパーツです。ただ色を塗るだけでなく、少しの工夫でより魅力的なデザインに仕上げることができます。

この記事では、CSSを使って「ぷるん」とした立体感のある丸型ボタンを作る方法を解説します。

一番のポイントは、影の使い方です。黒ではなくボタンと同系色の影を使うことで、透明感のある綺麗な質感を作ることができます。

初心者の方でも取り入れやすいよう、プロパティの役割を順番に説明していきます。ぜひ参考にしてみてください。

完成形
HTML
ボタンの「形」と「配置」を決める
「文字」のデザインを整える
「色」と「グラデーション」
「影」をつけて立体感を出す
「動き（アニメーション）」をつける
このコードのポイント
まとめ

完成形

マウス乗せた時とクリックした時に動きます

HTML

まずHTMLでボタンを作ります。

<button class="btn-gradient">PUSH</button>

スタイルを指定しなければこのように表示されます。

ボタンの「形」と「配置」を決める

まず、ボタンの大きさ、配置、丸い形を整える部分です。

.btn-gradient {
  display: block;        /* ボタンをブロック要素にして、幅や高さを指定しやすくする */
  width: 200px;         /* 横幅 */
  height: 200px;        /* 高さ（幅と同じにすると正方形になる） */
  margin: 40px auto;    /* ボタンを真ん中に寄せる */
  border: none;         /* デフォルトの枠線を消す */
  border-radius: 50%;   /* 角を50%丸める（正方形ならこれで円形になる） */
}

「文字」のデザインを整える

ボタンの中にある文字の大きさや色、マウスが乗った時の反応を設定します。

.btn-gradient {
  font-size: 1.8em;     /* 文字の大きさ */
  font-weight: bold;    /* 文字を太字にする */
  color: white;         /* 文字の色を白にする */
  cursor: pointer;      /* マウスを乗せた時に「指マーク」に変える */
}

1.8em: 文字のサイズ。標準を1とした時の1.8倍の大きさです。
cursor: pointer: マウスが重なった時に「クリックできる」ことを伝えるための設定です。

「色」と「グラデーション」

背景色を単色ではなく、斜めに色が変化するように設定しています。

background: linear-gradient(135deg, #ff6b6b 0%, #f06595 100%);

135deg: グラデーションの角度（左上から右下に向かう方向）。
#ff6b6b 0%: 開始の色（赤っぽい色）。
#f06595 100%: 終了の色（ピンクっぽい色）。

「影」をつけて立体感を出す

box-shadow を使うことで、ボタンが浮いているような効果を出しています。

box-shadow: 0 10px 20px rgba(240, 101, 149, 0.4);

0: 左右の影のズレ。
10px: 上下の影のズレ（下に10px出している）。
20px: 影のぼかし具合。
rgba(…): 影の色。最後の 0.4 は透明度で、少し透かして馴染ませています。

「動き（アニメーション）」をつける

マウスを乗せた時（hover）やクリックした時（active）の反応を作ります。

/* 共通設定 */
transition: all 0.3s ease; /* 変化を0.3秒かけて滑らかにする */

/* マウスを乗せたとき */
.btn-gradient:hover {
  transform: translateY(-5px); /* 上に5px移動させる */
  box-shadow: 0 15px 30px rgba(240, 101, 149, 0.6); /* 影を大きくしてより浮いた感じにする */
}

/* クリックした瞬間 */
.btn-gradient:active {
  transform: translateY(2px); /* 下に2px押し込む */
  box-shadow: 0 5px 10px rgba(240, 101, 149, 0.4); /* 影を小さくして床に近づける */
}

transition: これを書くことで、浮き上がったり沈んだりする動きが滑らかになります。
translateY: 縦方向の移動です。マイナスは上、プラスは下に動きます。

マウス乗せたりクリックしたりして動きをチェックしてください