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.