Formatting Content

Here, the HTML code that appears after the button () instruction has been changed (Figure 5-2). This code was retrieved using the Firebug extension in Firefox.

HTML generated by the button () method

Figure 5-2. HTML generated by the button () method

Again, as with other functions of jQuery UI, it is possible to use the CSS classes to customize the display of elements. For example, if we change the ui-button CSS class associated with <span> elements, we get a new appearance for the buttons (as shown in Figure 5-3).

Customized buttons

Figure 5-3. Customized buttons

Modify these elements (shown in bold) in the HTML by adding a <style> tag:

<!DOCTYPE html>
<script src = jquery.js></script>
<script src = jqueryui/js/jquery-ui-1.8.16.custom.min.js></script>

<link rel=stylesheet type=text/css
      href=jqueryui/css/smoothness/jquery-ui-1.8.16.custom.css />

<style type=text/css>
  span.ui-button {
    font-size : 10px;


<span id="button1"> Button 1 </span>
<span id="button2"> Button 2 </span>


$("#button1, #button2").button ();


This HTML code is identical, except that we added the <style> tag after the inclusion of jQuery UI styles. The addition of our own styles must be done after those of jQuery UI, otherwise our changes will be ignored.

Get jQuery UI now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.