影で立体的に見せるボタンを作る方法【HTML/CSS・サンプルコード付き】

文字・サイズ・色・角丸・グラデーション・アイコン・ホバー・立体表現などを設定して、HTML・CSSを自動生成できます。

影で立体的に見せるボタンを作る方法

ボタンの下方向に黒い影を付けて、背景から浮いているように見える立体的なボタンを作る方法を紹介します。このサンプルでは、基本のボタンをベースにCSSのbox-shadowを追加し、ボタンの下へ大きくぼかした影を表示します。JavaScriptを使用せず、HTMLとCSSだけで実装できます。

影を付けることでボタンと背景の距離を視覚的に表現でき、通常のフラットなボタンよりも存在感のあるデザインになります。お問い合わせページへのリンク、申し込みページへの移動、詳細ページを開くボタンなど、クリックできる場所を目立たせたい場面に利用できます。

HTMLではa要素を使ってリンクとして利用できるボタンを配置し、CSSでは背景色、文字色、内側余白、角丸、文字サイズに加えて影を設定します。box-shadowの縦方向の位置、ぼかしの大きさ、影の濃さを変更することで、ボタンが背景から浮いて見える距離や立体感の強さを調整できます。

コードについて 本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。

免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。

デモ

影で立体的に見せるボタン

ボタンの下に大きな黒い影を付け、背景から浮いているような立体感を表現しています。

ボタン

ボタンの下方向へ広がる黒い影によって、背景から浮いて見える立体的なデザインを確認できます。

コードをコピーして使おう！

<!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>

  <!-- 影で立体的に見せるボタン -->
  <a
    class="shadow-button_link"
    href="#">
    ボタン
  </a>

</body>
</html>

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

/* 影で立体的に見せるボタン */
.shadow-button_link{
  display:inline-block; /* 横幅を内容に合わせる */

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

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

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

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

  font-weight:700; /* ボタンを太字にする */

  box-shadow:0 18px 35px rgba(0,0,0,.35);
  /* 横方向0・下方向18px・ぼかし35pxの黒い影。
     18pxを大きくすると影が下へ離れ、
     35pxを大きくすると影が広くぼける。
     .35を大きくすると影が濃くなり、
     小さくすると薄くなる。 */
}

コードをコピーする場合 使用するコードのタブを選び、「このタブをコピー」をクリックすると、現在表示中のコードをコピーできます。
サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。

Q ダウンロードしたけど、これをネット上で動かすにはどうするの？

Googleアカウントがあれば、InfinityFreeで無料サーバーを作成して、ダウンロードしたサンプルをネット上で動かせます。

InfinityFreeを初めて利用する場合は①から、すでにサーバーを作成している場合は②へ進んでください。

ファイル構成と設置方法

このサンプルはHTMLとCSSの2ファイルで構成されています。HTMLではa要素を使ってリンクとして利用できるボタンを配置し、CSSではボタンの下方向に黒い影を付けます。大きくぼかした影によって、ボタンが背景から浮いているような立体感を表現します。

sample/
    ├── index.html
    └── style.css

各ファイルの役割
index.htmlは影付きボタンを配置するファイルです。a要素の文字を変更でき、href="#"を変更すると任意のリンク先を設定できます。

style.cssはボタンのデザインを設定するファイルです。背景色、文字色、内側余白、角丸、文字サイズに加えて、box-shadowでボタンの下方向へ黒い影を表示します。

設置方法・使い方
sampleフォルダへindex.htmlとstyle.cssを配置します。2つのファイルを同じ階層へ保存したあと、sample/index.htmlをブラウザで開いてください。ボタンの下方向に黒い影が広がり、背景から浮いているような立体的なボタンが表示されます。実際にリンクとして使用する場合は、a要素のhref="#"を移動先のURLへ変更してください。

カスタマイズできる内容
index.htmlではボタンに表示する文字とリンク先を変更できます。style.cssではボタンの内側余白、角丸、背景色、文字色、文字サイズを変更できます。また、box-shadowを調整することで、影の位置、広がり、濃さを変更し、立体感の強さを調整できます。

数値調整
style.css
padding:60px 20px;
ページ全体の内側余白です。上下の60pxを大きくすると上下の余白が広がり、左右の20pxを大きくすると画面端との間隔が広がります。

padding:14px 28px;
ボタンの内側余白です。上下の14pxを大きくするとボタンが高くなり、左右の28pxを大きくするとボタンが横に広がります。

border-radius:10px;
ボタンの角丸です。値を大きくすると丸みが強くなり、0にすると角丸のない四角いボタンになります。

font-size:16px;
ボタンの文字サイズです。値を大きくすると文字が大きくなり、小さくすると文字が小さくなります。

box-shadow:0 18px 35px rgba(0,0,0,.35);
ボタンの立体感を表現する黒い影です。最初の0は横方向の位置、18pxは下方向の位置、35pxは影のぼかし具合を指定しています。18pxを大きくすると影がボタンから下へ離れ、35pxを大きくすると影が広くぼけます。.35を大きくすると影が濃くなり、小さくすると薄くなります。

レスポンシブ対応
このサンプルではページ全体の左右に20pxの余白を確保し、ボタン自体は内容に合わせた横幅で表示されます。そのため、スマートフォン・タブレット・PCなど画面幅が異なる環境でも、画面端との間隔を保ちながら表示できます。