jQuery :button Selector

What You’ll Learn

The :button selector matches button elements and input elements with type="button". It is a jQuery extension (since 1.0) — useful when one form mixes both tag types and you want every plain button control in one query.

Introduction

HTML forms offer two ways to create clickable buttons: the <button> element and <input type="button">. Styling or wiring click handlers for “all the plain buttons” means selecting both shapes — not submit buttons, not text fields.

jQuery’s :button pseudo-class gathers those controls in one expression. It has existed since jQuery 1.0. Official docs note it is not standard CSS; the equivalent valid selector is $("button, input[type='button']").

Understanding the :button Selector

Think of :button as a filter for “button-shaped” controls that are not submit, reset, or other specialized input types.

• <button>Click</button> → matches (button tag).
• <input type="button" value="Go"> → matches.
• <input type="submit" value="Send"> → no match (use :submit).
• <input type="text"> → no match.

📝 Syntax

Official jQuery API form (since 1.0):

jQuery( ":button" )
// shorthand:
$( ":button" )

// scoped:
$( "form :button" )
$( "#toolbar button, #toolbar input[type='button']" ) // CSS equivalent

Parameters

• No arguments — the pseudo-class matches by element type and input type attribute.

Return value

• A jQuery object containing every matching button control in the search context.
• Empty collection when no button or input[type=button] elements exist.

Official jQuery API example

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

// Official demo matches 2: input[type="button"] + button element

Examples Gallery

Example 1 follows the official jQuery API demo. Examples 2–5 compare selectors, contrast with :submit, scope to a form, and use the CSS-equivalent pattern. Use the Try-it links to run each snippet.

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

// Matches: input[type="button"] and <button>
// Skips: submit, reset, text, checkbox, etc.

For this type jQuery found 2.
input[type="button"] and button element → class "marked"

console.log( ":button →", $( ":button" ).length );
console.log( "button tag →", $( "button" ).length );
console.log( "input[type=button] →", $( "input[type='button']" ).length );

// Typical form: :button count = tag count + input type=button count

:button → 2
button tag → 1
input[type=button] → 1

:button combines what the other two each capture separately

$( ":button" ).prop( "disabled", true );
$( ":submit" ).prop( "disabled", false );

// :button → button tag + input[type=button]
// :submit → input[type=submit] + button[type=submit]

Plain :button controls → disabled
:submit controls → still enabled

$( "#toolbar :button" ).addClass( "toolbar-btn" );

// Matches buttons inside #toolbar
// Ignores buttons elsewhere on the page

Buttons in #toolbar → class "toolbar-btn"
Same controls outside #toolbar → unchanged

// Same result as $(":button"), often faster:
$( "button, input[type='button']" ).css( "background-color", "#dbeafe" );

// Or narrow after a CSS scope:
$( "#form input" ).filter( ":button" );

button + input[type=button] → light blue background
Same elements as :button

🚀 Common Use Cases

• Form styling — highlight every plain button in a dialog.
• Disable controls — lock UI buttons during AJAX without disabling submit.
• Click wiring — attach handlers to all toolbar button controls at once.
• Accessibility audit — count button-shaped controls in a form region.
• Legacy markup — pages mixing <button> and <input type="button">.
• Plugin init — pass form :button to a button-enhancement plugin.

📝 Notes

• Available since jQuery 1.0 — jQuery extension, not standard CSS.
• CSS equivalent: $("button, input[type='button']") per official docs.
• All <button> tags match, including type="submit" on the tag.
• input[type="submit"] matches :submit, not :button.
• For performance, prefer the CSS combo or .filter(":button") after scoping.
• Pair with form context: $("#myForm :button").

💡 Best Practices