グラデーションボタンを作る方法【HTML/CSS・サンプルコード付き】

ボタン

グラデーションボタンを作る方法

グラデーションボタンを作る方法を紹介します。単色のボタンではなく、複数の色をなめらかにつなげた背景を使うことで、目を引くデザインのボタンを作成できます。お問い合わせボタンや購入ボタン、ダウンロードボタンなど、ユーザーに注目してほしい操作ボタンに使いやすいデザインです。

このサンプルでは、HTMLとCSSだけを使ってグラデーションボタンを作成します。CSSの linear-gradient を使用し、背景色を左から右へ自然に変化させます。JavaScriptは使用しないため、シンプルな構成でそのまま導入できます。

ボタンの色、角の丸み、文字サイズ、余白、ホバー時の見た目は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="gradient-button_wrap">

    <!-- グラデーションボタン -->
    <button class="gradient-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() の角度で変更でき、使用する色や角の丸み、余白、ホバー時の色、浮き上がる距離、アニメーション速度はCSSから自由にカスタマイズできます。

コメント