jQuery :button Selector: Which Elements Does It Match?

:button matches input[type="button"] and every button element. It does not match every input that looks like a button: submit and reset inputs are excluded.

Syntax and behavior

$(":button");
$("#form").find(":button");
$("button, input[type='button']");

A button element matches even when its type is submit. An input element matches only when its type is button. The selector is a jQuery extension rather than a standard CSS selector, so you cannot pass it directly to document.querySelectorAll(). For a standard selector, combine button and input[type="button"] with a comma. CSS, or Cascading Style Sheets, defines the appearance and layout of a webpage.

The official jQuery :button documentation describes additional call signatures and argument types.

Complete runnable example

Save the following code as a UTF-8 example.html file and open it in a browser. It loads the full jQuery 4.0.0 build from an external URL, so an internet connection is required. The $(function () { ... }) callback waits for the document to be ready before running the example.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery button-selector example</title>
  <style>
    body { margin: 24px; font-family: sans-serif; line-height: 1.6; }
    .marked { background: #fff0b3; border: 2px solid #835b00; }
    .active { color: #a00000; font-weight: bold; }
    button, input, select { font: inherit; }
    #output { white-space: pre-wrap; overflow-wrap: anywhere; }
  </style>
  <script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
</head>
<body>
<div id="form">
  <input id="a" type="button" value="Input button">
  <button id="b" type="button">Button element</button>
  <button id="c" type="submit">Submit button</button>
  <input id="d" type="submit" value="Submit input">
  <input id="e" type="reset" value="Reset input">
</div>
  <p id="output" aria-live="polite"></p>
  <script>
    $(function () {
      const $buttons = $("#form").find(":button");
      $buttons.addClass("marked");
      $("#output").text($buttons.map(function () { return this.id; }).get().join(", "));
    });
  </script>
</body>
</html>

Expected result

The elements with IDs a, b, and c receive the border and background, and the output reads a, b, c. The submit and reset inputs d and e do not match. This example uses a div rather than a form, so clicking a button does not submit data.

Important details and troubleshooting

• Inside a real form, a button without an explicit type can submit the form. Set type="button" for buttons intended only to run JavaScript.
• input:button excludes button elements. Decide whether your selection should include both kinds of elements.
• An unscoped :button selector searches the whole document. Restrict the selection to a form or toolbar to avoid changing unrelated controls.

Compare the behavior with .addClass() and CSS classes.