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

ボタン

影付きボタンを作る方法

影付きボタンを作る方法を紹介します。CSSの box-shadow を使うことで、ボタンの下に自然な影を付け、画面から少し浮いているような見た目を作成できます。平面的なボタンよりも存在感を出しやすく、クリックできる要素であることも分かりやすくなります。

このサンプルでは、HTMLとCSSだけを使って影付きボタンを作成します。影の位置、ぼかし具合、広がり、色の濃さをCSSで指定することで、控えめな影からしっかり目立つ影まで調整できます。JavaScriptは使用しないため、シンプルに導入できます。

送信ボタン、購入ボタン、ダウンロードボタン、CTAボタンなど、目立たせたいボタンに活用できます。ボタンの色や角の丸み、余白、影の強さは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>

  <!-- ボタン配置エリア -->
  <div class="shadow-button_wrap">

    <!-- 影付きボタン -->
    <button class="shadow-button_button" type="button">
      影付きボタン
    </button>

  </div>

</body>
</html>

ファイル構成と設置方法

このサンプルは、HTMLとCSSの2ファイルで構成されています。HTMLに影付きボタンを配置し、CSSでボタンの色や角の丸み、影の大きさや濃さを設定します。JavaScriptを使用しないため、HTMLとCSSだけで簡単に影付きボタンを作成できます。 

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

2つのファイルを同じフォルダへ配置し、ブラウザで index.html を開くと動作を確認できます。影の位置や広がり、ぼかし具合、濃さは box-shadow の値を変更することで自由に調整できます。ボタンの色、角の丸み、余白、文字サイズもCSSから変更できるため、サイトのデザインに合わせてカスタマイズできます。

コメント