立体的なボタンを作る方法
立体的なボタンをHTMLとCSSで作る方法を紹介します。このサンプルでは、ボタンの下側に厚みを付け、影を組み合わせることで、平面的なボタンよりも奥行きを感じられるデザインに仕上げます。JavaScriptは使用せず、HTMLでボタンを配置し、CSSだけで立体的な見た目とマウス操作時の変化を実装します。
通常時は青色のボタンに下方向の厚みと影を表示し、カーソルを合わせると少し上へ浮き上がります。ボタンを押している間は下方向へ移動し、厚みと影を小さくすることで、実際にボタンを押し込んだような動きを表現します。お問い合わせフォームの送信ボタン、会員サイトの操作ボタン、ECサイトの購入ボタンなど、クリックできる場所を視覚的に分かりやすくしたい場面で利用できます。
ボタンの文字、横幅、余白、背景色、角丸、下側の厚み、影の広がり、浮き上がる距離や押し込む距離などはHTMLとCSSから変更できます。ボタンの横幅は画面サイズに合わせて調整されるため、スマートフォン・タブレット・PCでも利用できます。基本的なHTMLとCSSだけで実装できるため、立体的なボタンデザインを取り入れたい場合にも使いやすいサンプルです。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
コードをコピーして使おう！
<!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="three-dimensional-button">
<!-- タイトル -->
<div class="three-dimensional-button_title">
立体的なボタン
</div>
<!-- 説明文 -->
<p class="three-dimensional-button_text">
厚みと影を付けた立体的なボタンです。
</p>
<!-- 立体的なボタン -->
<button
class="three-dimensional-button_button"
type="button">
ボタン
</button>
</div>
</body>
</html>サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTMLとCSSの2ファイルで構成されています。HTMLではタイトル、説明文、button要素を配置し、CSSではボタンの大きさ、色、角丸、下側の厚み、影などを設定します。通常時は厚みのある立体的なボタンとして表示され、カーソルを合わせると上へ浮き上がり、クリックしている間は下へ移動して押し込まれたように見える動きをCSSだけで実装しています。
sample/
├── index.html
└── style.css
各ファイルの役割
index.htmlは立体的なボタン全体を構成するファイルです。「立体的なボタン」のタイトル、説明文、ボタンに表示する「ボタン」の文字を変更できます。button要素を使用しているため、用途に合わせて送信ボタンや操作ボタンなどへ変更できます。
style.cssはボタン全体のデザインとマウス操作時の動きを設定するファイルです。ボタンの横幅、高さ、余白、背景色、角丸、下側の厚み、影、ホバー時の浮き上がり量、クリック時の押し込み量などを変更できます。border-bottom:8px solid #1e40af;で下側の厚みを作り、box-shadowを組み合わせることで立体感を表現しています。
設置方法・使い方
sampleフォルダへindex.htmlとstyle.cssを配置し、2つのファイルを同じ階層へ保存します。そのあとsample/index.htmlをブラウザで開くと立体的なボタンが表示されます。ボタンへマウスカーソルを合わせると上方向へ浮き上がり、クリックしている間は下方向へ移動して押し込まれたように表示されます。
カスタマイズできる内容
index.htmlではタイトル、説明文、ボタンに表示する文字を変更できます。用途に合わせて「送信する」「詳しく見る」「購入する」などの文章へ変更できます。
style.cssではボタン全体の最大横幅や余白、ボタンの最小横幅、高さ、内側余白、枠線、下側の厚み、角丸、背景色、文字サイズ、影などを変更できます。また、:hoverのtransformを変更するとカーソルを合わせたときの浮き上がり量を調整でき、:activeのtransformを変更するとクリック時の押し込み量を調整できます。
数値調整
style.css
max-width:700px;
ボタンを表示する全体エリアの最大横幅です。値を大きくすると全体が横に広がり、小さくするとコンパクトになります。
margin:40px auto;
全体エリアの上下余白です。40pxを大きくすると上下の間隔が広がり、小さくすると狭くなります。
padding:32px;
全体エリアの内側余白です。値を大きくすると内容と外枠の間隔が広がります。
border-radius:18px;
全体エリアの角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
font-size:22px;
タイトルの文字サイズです。値を大きくするとタイトルが大きくなり、小さくすると控えめになります。
margin:0 0 28px;
説明文の下側余白です。28pxを大きくするとボタンとの間隔が広がり、小さくすると近づきます。
min-width:180px;
ボタンの最小横幅です。値を大きくすると横長になり、小さくするとコンパクトになります。
min-height:52px;
ボタンの最小高さです。値を大きくするとボタンが高くなります。
padding:14px 28px;
ボタンの内側余白です。14pxが上下、28pxが左右です。値を大きくするとボタン内部の余白が広がります。
border-bottom:8px solid #1e40af;
ボタン下側の厚みを作る設定です。8pxを大きくすると厚みが増して立体感が強くなり、小さくすると薄くなります。#1e40afを変更すると厚み部分の色を変更できます。
border-radius:12px;
ボタンの角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
font-size:16px;
ボタン文字のサイズです。値を大きくすると文字が大きくなり、小さくすると小さくなります。
box-shadow:0 8px 14px rgba(37,99,235,.22);
通常時のボタン下側へ付ける影です。8pxを変更すると影の位置が変わり、14pxを変更するとぼかしの広がりが変わります。値を大きくすると浮いている印象が強くなります。
transform:translateY(-4px);
ボタンへカーソルを合わせたときの浮き上がり量です。現在は4px上へ移動します。負の値の絶対値を大きくすると、さらに上へ浮き上がります。
box-shadow:0 12px 18px rgba(37,99,235,.28);
ホバー時のボタンへ付ける影です。通常時より影を広げることで、さらに手前へ浮き上がったように見せています。
transform:translateY(3px);
ボタンをクリックしている間の押し込み量です。現在は3px下へ移動します。値を大きくすると、より深く押し込まれたように見えます。
box-shadow:0 4px 8px rgba(37,99,235,.18);
クリック中の影です。通常時より影を小さくすることで、ボタンが背景へ近づいたように見せています。
transition:.2s
ボタンの移動と影が切り替わる時間です。0.2秒で変化します。値を大きくするとゆっくり、小さくすると速く切り替わります。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssでは全体エリアにwidth:100%とmax-width:700pxを指定しているため、画面幅に合わせて横幅が縮小されます。さらに640px以下では全体の余白をpadding:24px 18px;へ変更し、ボタンにはwidth:100%とmax-width:280pxを指定しています。これにより、スマートフォン・タブレット・PCで利用できます。
コメント