jQuery :button Selector

What Is :button?

:button (since jQuery 1.0) selects every <button> element and every <input type="button">. It does not match submit or reset inputs. Official CSS equivalent: $("button, input[type='button']").

$(":button")
  ✓ <button>…</button>
  ✓ <input type="button">
  ✗ <input type="submit">
  ✗ <input type="reset">

$("button, input[type='button']")   // CSS-equivalent
$("form *").filter(":button")       // official speed tip

How to Use :button

Scope to a form, then count, style, or disable every button control.

1. Prefer $("form :button") over bare $(":button") on large pages.
2. Remember it includes input[type="button"] — not just <button>.
3. For speed: $("button, input[type='button']") or $("form *").filter(":button").
4. Use :submit / :reset when you need those input types instead.

Pseudocode

matches = []
for each element in search context:
    if element.tag is button:
        matches.add(element)
    else if element.tag is input
         and element.type is "button":
        matches.add(element)

return matches

// Faster pattern:
candidates = querySelectorAll("button, input[type='button']")
return jQuery(candidates)

Cheat Sheet

Keep these facts handy while selecting button controls.

Live Preview

Run different selectors against a small sample form and see which button controls match.

$(":button")
matched: 2
labels: Input Button, Button

/* button tag + input[type=button] */

jQuery Examples

Short, copy-ready snippets. Open a browser with jQuery loaded, or use Try It Yourself for a live editor.

var input = $(":button").addClass("marked");
$("div").text("For this type jQuery found " + input.length + ".");

// Prevent the form from submitting
$("form").on("submit", function (event) {
  event.preventDefault();
});

For this type jQuery found 2.
(input[type=button] + <button> marked)

console.log(":button →", $(":button").length);
console.log("button tag →", $("button").length);

// :button → 2
// button tag → 1  (misses input[type=button])

:button → 2
button tag → 1

Tag selector misses input[type=button]

var $a = $(":button");
var $b = $("button, input[type='button']");

console.log($a.length === $b.length);
// true — same match set, CSS form is faster

true
Same result set; CSS form uses querySelectorAll

var $fast = $("form *").filter(":button");

console.log($fast.length);
// 2 — same as $("form :button"), often faster

2
CSS descendants first, then :button filter

console.log(":button →", $(":button").length);
console.log(":submit →", $(":submit").length);
console.log(":reset  →", $(":reset").length);

// :button skips submit/reset inputs
// use :submit / :reset for those types

:button → 2
:submit → 1
:reset  → 1

Different pseudo-classes for different roles

Performance Notes

Official jQuery docs note that because :button is not CSS, it cannot use the querySelectorAll boost. Select with a pure CSS selector first, then .filter(":button").

Key Takeaways