YUI Library Home

YUI Library Examples: Button Control

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

Button Control:

Copyright © 2011 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings