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

ボタン

立体ボタンを作る方法

立体ボタンを作る方法を紹介します。CSSの影や位置調整を使うことで、ボタンが少し浮き上がっているような立体的な見た目を作成できます。通常の平面的なボタンよりも押せる要素であることが分かりやすく、WebサイトやWebアプリの操作ボタンとして使いやすいデザインです。

このサンプルでは、HTMLとCSSだけを使って立体ボタンを作成します。box-shadow で下方向に影を付け、クリック時には少し下へ移動させることで、実際に押し込まれたような動きを表現します。JavaScriptを使わずに、CSSだけで見た目と押下感を作れます。

送信ボタン、ダウンロードボタン、メニュー内のボタン、ゲーム風UIなど、目立たせたい操作ボタンに活用できます。影の大きさ、押し込まれる距離、色、角の丸み、文字サイズは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_wrap">

    <!-- 立体ボタン -->
    <button class="three-dimensional-button_button" type="button">
      立体ボタン
    </button>

  </div>

</body>
</html>

ファイル構成と設置方法

このサンプルは、HTMLとCSSの2ファイルで構成されています。HTMLに立体ボタンを配置し、CSSでグラデーションや影、押し込まれるアニメーションを設定します。JavaScriptを使用しないため、HTMLとCSSだけで立体的なボタンを実装できます。 

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

2つのファイルを同じフォルダへ配置し、ブラウザで index.html を開くと動作を確認できます。ボタンをクリックすると下へ移動し、押し込まれたような立体感を確認できます。ボタンの色は linear-gradient()、立体感は box-shadow、押し込まれる距離は translateY()、クリック時の動作速度は transition の値を変更することで自由にカスタマイズできます。

コメント