<button>

対応:		HTML 4（1997）

『button』要素はクリックできるボタンを作成します。『input』のボタン系タイプと異なり、要素の中にHTMLを入れられるため、アイコンや装飾を含む柔軟なボタンが作成できます。

構文

<!-- フォーム送信ボタン -->
<button type="submit">送信する</button>

<!-- 汎用ボタン（JavaScriptで処理） -->
<button type="button">クリック</button>

<!-- 無効化されたボタン -->
<button type="button" disabled>使用不可</button>

<!-- HTMLを含むボタン -->
<button type="button">
  <img src="icon.png" alt=""> 検索
</button>

属性一覧

属性	概要
type	ボタンの動作を指定します。『submit』（送信）・『button』（汎用）・『reset』（リセット）の3種類があります。
name	ボタンの名前を指定します。複数の送信ボタンがある場合に、どのボタンが押されたかを識別するために使います。
value	フォーム送信時にサーバーへ送る値を指定します。
disabled	ボタンをグレーアウトして押せない状態にします。値は不要な論理属性です。
form	ボタンを関連付けるフォームの『id』を指定します。フォームの外にボタンを置く場合に使います。

サンプルコード

sample_button.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>button要素</title>
  <style>
    button {
      padding: 8px 16px;
      margin: 4px;
      border-radius: 4px;
      cursor: pointer;
    }
    .btn-primary { background: #3498db; color: #fff; border: none; }
    .btn-danger  { background: #e74c3c; color: #fff; border: none; }
  </style>
</head>
<body>

  <form id="myForm" action="/send" method="post">
    <p>
      <label for="name">お名前：<input type="text" id="name" name="name"></label>
    </p>
  </form>

  <!-- form属性でフォームの外からも送信ボタンとして機能する -->
  <button type="submit" form="myForm" class="btn-primary">送信する</button>

  <!-- 汎用ボタン（JavaScriptで処理） -->
  <button type="button" onclick="alert('こんにちは！')">あいさつ</button>

  <!-- 無効化されたボタン -->
  <button type="button" class="btn-danger" disabled>削除（無効）</button>

  <!-- name/valueで複数の送信ボタンを識別する -->
  <form action="/article" method="post">
    <input type="hidden" name="id" value="42">
    <!-- どちらが押されたかはサーバー側で $_POST['action'] で判別 -->
    <button type="submit" name="action" value="save">下書き保存</button>
    <button type="submit" name="action" value="publish">公開する</button>
  </form>

</body>
</html>

実行結果

青い「送信する」ボタン、「あいさつ」ボタン、グレーアウトされた「削除（無効）」ボタンが表示されます。「あいさつ」をクリックするとアラートが表示され、「削除（無効）」はクリックできません。「下書き保存」または「公開する」のどちらかをクリックするとそれぞれ異なる『action』値がサーバーに送信されます。

サンプルページはこちら

概要

『button』要素の最大の特徴は、内容にHTMLを含められる点です。テキストだけでなくアイコン画像やSVGなどを入れることができるため、デザインの自由度が高くなります。また、CSSによるスタイルも柔軟に適用できます。

『type』属性を省略すると、フォーム内では自動的に『submit』として動作します。JavaScriptのイベントだけに使いたいボタンは必ず『type="button"』を明示してください。意図せずフォームが送信されるバグの原因になります。

『name』と『value』の組み合わせは、1つのフォームに複数の送信ボタンを設置する際に便利です。どのボタンが押されたかをサーバー側で判定できます。入力系の他のコントロールについては『input（ボタン・その他）』のページも参照してください。

CSSによるボタンのカスタマイズ

ブラウザのデフォルトスタイルをリセットして、デザインを完全にカスタマイズする方法です。

<style>
  /* デフォルトスタイルをリセットして一から作る */
  .btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    font-size: 1rem;
    font-family: inherit;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.1s;
    text-decoration: none;  /* <a>をボタン風にする場合も統一 */
  }
  .btn:hover { filter: brightness(1.1); }
  .btn:active { transform: scale(0.97); }
  .btn:disabled, .btn[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
  }
  /* バリエーション */
  .btn-primary   { background: #3498db; color: #fff; }
  .btn-success   { background: #2ecc71; color: #fff; }
  .btn-danger    { background: #e74c3c; color: #fff; }
  .btn-outline   { background: transparent; color: #3498db;
                   border: 2px solid #3498db; }
  .btn-ghost     { background: transparent; color: #333; }
  /* サイズ */
  .btn-sm { padding: 6px 12px; font-size: 0.85rem; }
  .btn-lg { padding: 14px 28px; font-size: 1.15rem; }
</style>

<button type="button" class="btn btn-primary">送信する</button>
<button type="button" class="btn btn-outline">キャンセル</button>
<button type="button" class="btn btn-danger btn-sm">削除</button>
<button type="button" class="btn btn-primary" disabled>処理中...</button>

JavaScriptとの連携パターン

// クリックイベント（推奨：addEventListener方式）
var btn = document.getElementById("my-btn");
btn.addEventListener("click", function() {
  console.log("クリックされました");
});

// ボタンを無効化・有効化する
function setLoading(btn, isLoading) {
  btn.disabled = isLoading;
  btn.textContent = isLoading ? "送信中..." : "送信する";
}

// フォーム送信時にボタンを無効化して二重送信を防ぐ
var form = document.getElementById("my-form");
var submitBtn = document.getElementById("submit-btn");
form.addEventListener("submit", function() {
  setLoading(submitBtn, true);
});

// ボタンのvalue属性を取得する（name/valueで識別するとき）
document.querySelectorAll("[data-action]").forEach(function(btn) {
  btn.addEventListener("click", function() {
    console.log("action:", this.dataset.action);
  });
});