Button Control: Examples

The Button Control enables the creation of rich, graphical buttons that function like traditional HTML form buttons; the Button Control provides more-impactful and easier-to-use replacements for simple buttons, radio buttons, and checkboxes, and it can go beyond the HTML form-control functionality by providing an extensible platform for various split-button implementations (including menu buttons).

• Push Buttons: This example explores various ways to create a Push Button.
• Link Buttons: Link Buttons function like HTML anchor elements; this example shows you several ways to create Link Buttons.
• Checkbox Buttons: This example demonstrates different ways to create a Button that functions like an HTML checkbox.
• Radio Buttons: This example demonstrates different ways to create a Button that functions like an HTML radio button.
• Submit Buttons: This example demonstrates different ways to create a Button that functions like an HTML submit button.
• Reset Buttons: This example demonstrates different ways to create a Button that functions like an HTML reset button.
• Menu Buttons: With the inclusion of the optional Menu Control, it is possible to create Buttons that incorporate a menu; this example shows you how.
• Split Buttons: Split Buttons are a hybrid of Menu Buttons and standard buttons; this example shows you how to use the Button Control to create Split Buttons.
• Simple Calendar Menu Button: This example demonstrates how to create a Menu Button whose Menu instance displays a Calendar.
• Calendar Menu Button with Date on Button Face: This example demonstrates how to create a Menu Button whose Menu instance displays a Calendar and label reflects the selected date.
• Color Picker Button: This example demonstrates how to render a Color Picker into the Menu of a Split Button.
• Fixed Width Menu Button: This example demonstrates how to create a Menu Button whose text label has a fixed width.
• Glowing Button: This example demonstrates how to skin a Button instance to create a glossy, glass-like effect with a glowing background reminiscent of Aqua buttons found in Mac OS X.
• Slider Button: This example demonstrates how to combine a Split Button with a Slider to create an opacity slider button, similar to that found in Adobe Photoshop.
• Using the Button ARIA Plugin: The Button ARIA plugin makes it easy to use the WAI-ARIA Roles and States with the Button control.
• Using A Menu Button To Replace A <select> Element: This example illustrates how to use Button to mimic the behavior of an HTML <select> element.
• Replacing the content of a Button's Menu: This example illustrates how to replace the content of a Button's Menu on the fly.

Other YUI Examples That Make Use of the Button Control

• Combobox, with CSS for Multiple Stacked Instances (included with examples for the AutoComplete Control)
• Showing, Hiding, and Reordering Columns. (included with examples for the DataTable Control)
• Complex Application (included with examples for the Layout Manager)