jQuery :button Selector

The jQuery :button selector selects the HTML button element and the input type="button" element. We don’t need to use the attribute type="button" to select the button element. It requires only to specify :button to select the button element.

jQuery :button Selector

Syntax of jQuery :button Selector

The syntax of jQuery :button selector is given below.


It requires no tag name before the selector name to select the button element. However, if you want to select only the specified button element. You have to specify the class name, tag name or id of the element.

jQuery :button Selector Selects Button Element in a Form

The form contains many input fields and an HTML button element to submit the button. If you want to select the button element, you have to use the selector to select the element. You have to use the method as given in the example below.


Test it Live


The above example contains the input text and email field. To submit the form, it contains the button element. After selecting the button, jQuery applies the background color as ‘yellow’ to the button. However, you can also apply other effects to the button using jQuery.

Select Form Input Element with Attribute type=”button”

In addition to the above button element, the selector also select the input element with type="button". Both button element and input type button creates a similar button to submit the form. See the example below contains a form with input type elements.



The above example contains the button element with text in red color. The selector first selects the input type element to apply other effects.

I hope you like the above examples of jQuery :button selector. If you have any queries regarding the above selector, please comment below.

Also tell me, what other methods you are using with the selector by commenting below.