jQuery :button Selector

Last Updated : 11 Jul, 2025

The jQuery :button selector selects button elements and input elements with type="button". The button element is not selected if we use input=" button" as a selector.

Syntax:

$(":button")

Example 1: In this example, we are using jQuery: button Selector.

HTML

<!DOCTYPE html> <html> <head> <title>jQuery :button Selector</title> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">  </script> <script>  $(document).ready(function () {  $(":button").css(  "background-color", "lightgreen");  });  </script> </head> <body> <center> <form action=""> Name: <input type="text" name="user"> <br><br> Password: <input type="password" name="password"> <br><br> <button type="button"> Button </button> <br><br> <input type="reset" value="Reset"> <input type="submit" value="Submit"> <br> </form> </center> </body> </html>

Output:

chrome-capture-2023-6-6

Example 2: In this example, we are using jQuery: button Selector.

HTML

<!DOCTYPE html> <html> <head> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js">  </script> <script>  $(function () {  $(":button").css(  "border", "10px dashed green");  });  </script> </head> <body> <input type="button" value="Test" /> <br><br> <input id="txtName" type="text" /> <input type="submit" value="Test" /> <br><br> <button id="button1"> This is a button </button> <br> </body> </html>