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.

Configuration for This Example

You can load the necessary JavaScript and CSS for this example from Yahoo's servers. Click here to load the YUI Dependency Configurator with all of this example's dependencies preconfigured.