影で立体的に見せるボタンを作る方法
CSSの影を使って、背景から浮いているように見える立体的なボタンを作る方法を紹介します。このサンプルではHTMLのbutton要素でボタンを作成し、CSSのbox-shadowを使ってボタンの下側へ大きめの影を付けます。複雑な装飾やJavaScriptを使用せず、HTMLとCSSだけでシンプルなボタンに奥行きのある見た目を加えられます。
通常の平面的なボタンよりも存在感を出しやすいため、お問い合わせ画面の送信ボタン、会員サイトの操作ボタン、ECサイトの商品購入ボタン、サービス紹介ページの案内ボタンなどに利用できます。影にはボタンと同系統の青色を使用しており、下方向へ広くぼかすことでボタンが背景から浮いているような立体感を表現しています。
HTMLではボタンに表示する文字を変更でき、CSSではボタンの背景色、文字色、余白、角丸、文字サイズなどを調整できます。また、box-shadowの位置、ぼかしの大きさ、色、透明度を変更することで、影の強さや広がりも用途に合わせてカスタマイズできます。HTMLとCSSの2ファイルだけで実装できるため、初心者でも導入しやすい影付きボタンのサンプルとして利用できます。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
コードをコピーして使おう！
<!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_demo">
<!-- タイトル -->
<div class="shadow-button_title">
影で立体的に見せるボタン
</div>
<!-- 説明文 -->
<p class="shadow-button_text">
ボタンの下に大きな影を付け、背景から浮いているような立体感を表現しています。
</p>
<!-- 影付きボタン -->
<button class="shadow-button_button" type="button">
影付きボタン
</button>
</div>
</body>
</html>サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTMLとCSSの2ファイルで構成されています。HTMLではタイトル、説明文、影付きボタンを配置し、CSSでは表示エリアとボタンのデザインを設定します。ボタンにはbox-shadowを指定し、下方向へ大きくぼかした青色の影を付けることで、背景から浮いているような立体感を表現します。JavaScriptは使用せず、HTMLとCSSだけで実装できます。
sample/
├── index.html
└── style.css
各ファイルの役割
index.htmlはボタン表示エリアを構成するファイルです。「影で立体的に見せるボタン」のタイトル、説明文、ボタンに表示する「影付きボタン」の文字を変更できます。button要素を使用してボタンを配置しています。
style.cssは表示エリアと影付きボタンのデザインを設定するファイルです。表示エリアの横幅、余白、背景色、角丸のほか、ボタンの横幅、高さ、背景色、文字色、文字サイズ、角丸、影などを変更できます。ボタンのbox-shadowを調整することで、影の位置やぼかしの広がりを変更できます。
設置方法・使い方
sampleフォルダへindex.htmlとstyle.cssを配置し、2つのファイルを同じ階層へ保存します。そのあとsample/index.htmlをブラウザで開くと、青色の影付きボタンが表示されます。ページを開いた時点でボタンの下方向に影が表示され、背景から浮いているような立体的な見た目を確認できます。
カスタマイズできる内容
index.htmlではタイトル、説明文、ボタンに表示する文字を変更できます。用途に合わせてボタンの表示内容を書き換えられます。
style.cssでは表示エリアの最大横幅、余白、枠線、角丸、背景色を変更できます。ボタンでは最小横幅、最小高さ、内側余白、背景色、文字色、文字サイズ、角丸を変更できます。特にbox-shadow:0 18px 35px rgba(37,99,235,.45);を変更すると、立体感を作っている影の位置、ぼかし、色、透明度を調整できます。
数値調整
style.css
max-width:700px;
ボタン表示エリアの最大横幅です。値を大きくすると横に広がり、小さくするとコンパクトになります。
margin:40px auto;
ボタン表示エリアの上下余白です。40pxを大きくすると上下の間隔が広がり、小さくすると狭くなります。
padding:60px 32px;
ボタン表示エリアの内側余白です。60pxが上下、32pxが左右の余白です。値を大きくすると内容と外枠の間隔が広がります。
border:1px solid #e5e7eb;
ボタン表示エリアの枠線です。1pxを大きくすると枠線が太くなります。
border-radius:18px;
ボタン表示エリアの角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
font-size:22px;
タイトルの文字サイズです。値を大きくすると文字が大きくなり、小さくすると小さくなります。
margin:0 0 36px;
説明文の下側余白です。36pxを大きくするとボタンとの間隔が広がり、小さくすると狭くなります。
line-height:1.8;
説明文の行間です。値を大きくすると行間が広がり、小さくすると詰まった表示になります。
min-width:180px;
ボタンの最小横幅です。値を大きくするとボタンが横に広がります。
min-height:52px;
ボタンの最小高さです。値を大きくするとボタンが高くなります。
padding:14px 28px;
ボタンの内側余白です。14pxが上下、28pxが左右です。値を大きくすると文字とボタン端の間隔が広がります。
border-radius:999px;
ボタンの角丸です。大きな値を指定することで、左右が丸い形にしています。
font-size:17px;
ボタンの文字サイズです。値を大きくすると文字が大きくなり、小さくすると小さくなります。
box-shadow:0 18px 35px rgba(37,99,235,.45);
ボタンの立体感を作る影です。18pxは影を下方向へ移動させる距離で、値を大きくすると影がさらに下へ移動します。35pxは影のぼかし量で、値を大きくすると影が広く柔らかくなります。.45は影の透明度で、値を大きくすると影が濃くなり、小さくすると薄くなります。
padding:48px 18px;
画面幅640px以下で使用するボタン表示エリアの内側余白です。48pxが上下、18pxが左右の余白です。
max-width:280px;
画面幅640px以下でのボタンの最大横幅です。値を大きくするとボタンが広がり、小さくするとコンパクトになります。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-width:700pxにより、ボタン表示エリアが画面幅に合わせて縮小されます。また、画面幅640px以下ではpadding:48px 18px;へ変更して左右の余白を抑え、ボタンにはwidth:100%とmax-width:280pxを指定しています。これにより、スマートフォン・タブレット・PCで利用できます。
コメント