XUL Programmer's Reference Manual

<button />

Attributes	Common Children
value	* * *
class
onclick
oncommand
id
tooltip
default
disabled
toggled
src
crop

<titledbutton /> (deprecated)

Attributes	Common Children
value	* * *
class
align
onclick
oncommand
id
tooltip
default
disabled
toggled
src
crop

Button Classes

<button> is the name of the XUL button widget. <button> inherits from <box>, so it uses that widget's positioning atttibutes, and it can be styled using various button classes. Button behavior is defined largely in the stylesheets. The states of the button -- inactive, active, and hover (which is the state the button is in when the mouse is over the button but no click has been made)-- correspond to three pseudo-classes that commonly describe button behavior. The following example style definitions work together to make the button push down when it's clicked and highlight when the mouse hovers over it:

button.bookmarkbutton {
   margin: 0px;
   max-width: 8em;
   font: inherit;
   font-size: smaller;
   color: #99CCCC;
   border: none;
   padding: 1px;
   background-image: none;
}

button.bookmarkbutton:hover {
   color: #CCFFFF;
}

button.bookmarkbutton:active {
   color: #CCFFFF;
   padding-left: 2px;
   padding-top: 2px;
   padding-right: 0px;
   padding-bottom: 0px;
}

Note that the first class, bookmarkbutton, reflects the style of the button when it is inactive. When the mouse hovers, the button turns a light green color, as described in the ":hover" pseudo-class. When the button is clicked, the padding style definitions make the button look like it is being depressed.

Button Events

Event listeners can be attached to buttons to invoke commands. For example, the button's onclick event (note the lowercase event: XUL does not follow the JavaScript convention of naming events with middle caps, as in "onClick") can call a JavaScript function, as in the following example:

<button class="pane" 
   value="&TOC.label;" 
   oncommand="GetDoc('contents.html')"/>

See the oncommand attribute for more information about attaching event listeners to buttons.

Last updated: 3/21/00 Ian Oeschger