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.
Skinning the Button widget is done using CSS. The stylesheet used for other Button examples is a minified version of the button-core.css and button-skin.css files. When customizing the Button skin, use the raw source files as a reference.
The button-core.css file includes foundational styling that clears the default
padding, margins and borders for the
<button> element as
wells as normalizes its display type, whereas the button-skin.css file is used
to apply colors, background images, etc. Skinning can be accomplished by
either overriding the styles defined in the button-skin.css file, or by creating
an entirely new skin file. When overriding styles, place them in a separate
file to simplify integrating with YUI updates. The follow example illustrates
how to create a new style for a Button instance from scratch.
Begin by creating a new Button instance.
Next, add style definitions for borders, background colors, and apply a transparent background to the Button's root element.
Lastly, utilize the ColorAnim utility to animate the Button instance's background color.
Note: You are viewing this example in debug mode with logging enabled. This can significantly slow performance.
All YUI 2.x users should review the YUI 2.8.2 security bulletin, which discusses a vulnerability present in YUI 2.4.0-2.8.1.