The HTML tag of <button> will put an element on your page that is already styled by the browser to look like a web page button. The <button> element is often used for links or for other functionality. It looks something like this:

.button() enhances other standard elements as well, such as inputs and anchors.

<input type="button" value="Push Here">

Each browser has its own special way of styling a button element and you can use CSS to style a button so that it looks a certain way no matter which browser the visitor is using. You can use CSS to style the <button> element to better match the look and coloring of your web page.</button>.

 

The jQuery UI: .button() widget basic functionality

The jQuery UI .button( ) widget allows you to change certain functionality and appearance of buttons.

As with all of the jQuery UI nteractions, Widgets and Effects, you need to load the core jQuery .js file and the jQuery UI .js file. You may also wish to add the jQuery UI stylesheet.

<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
// Optional
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">

When you use .button() in your script, jQuery automatically assigns classes to the <button> tag. If you are linking to the jQuery UI stylesheets, it will style the button for those classes. A simple line of script like this:

$( "button" ).button();

and jQuery takes this line in your HTML document:

<button>CLICK THIS</button>

and turns it into this:

<button class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button">
<span class="ui-button-text">CLICK THIS</span>
</button>

These classes are not just there for styling. jQuery uses these classes for targeting with the <script>.

 

jQuery .button() and .buttonset() for check boxes

Your basic HTML checkbox, that you often see on forms, is a little squar box with text next to it. When used with a form and a PHP submittal process, this checkbox will send informaton to the serverr about which box or boxes were checked. When you have a series of checkboxes in a form, you generally can check none, one or more of the checkboxes. This is not the case with radio buttons, where clicking on one will turn of any other radio buttons in that group where each radio button as a separate id but the same name attribute. Here is what you regular checkboxes will look like (of course they look slightly different on browser or another).

If you simply add this below to the script for the page:

$( "#sixtiesband" ).button();

jQuery will take this line in your HTML document:

<input type="checkbox" id="sixtiesband"><label for="check">BEATLES</label>

and turn it into this:

<input class="ui-helper-hidden-accessible" id="check" type="checkbox">
<label role="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" for="check">
<span class="ui-button-text">BEATLES</span>
</label>

Again the reason for this is not just for applying special styles, it allows targeting with the jQuery UI .js file for manipulation.

The default manipulation, this is if you have the jQuery UI stylesheet linked to, is that the button will be slightly shaded before being clicked and will be white after. This is a way to indicate that this button has been selected. You can add your own coloration by targeting the class names that jQuery UI added to the checkboxes. jQuery UI .button() also gets rid of the little box and check mark.

You end up with checkboxes that look like this:

The jQuery UI of .buttonset() adds the class name of ui-buttonset to a group of buttons contained in a single element and will add all the classes shown above to each in that group.

 

Adding icons with .button()

The jQuery UI .button() allows you to add parameters to load icons for the buttons. You can choose from the standard jQuery icons as shown in the jQ.Zemplate article: List of jQuery UI Icons

$("button").button({
    icons: {
        primary: "ui-icon-gear",
        secondary: "ui-icon-triangle-1-s"
    }
})