Flex 3 makes it easy as pie to transform a series of images into a custom Button control.

First, create a CSS style declaration for your button, and define a different skin for each image you want to use. If you only have a single image, you only have to define the skin property. Otherwise you’ll want to implement the upSkin, downSkin, overSkin and disabledSkin properties.

To embed an image asset in CSS, use the following syntax:

up-skin: Embed("pathTo/myImages/Up.png");


Once you’ve created your style declaration, you’ll need to reference it in the styleName property of your Button control.

Finally, since we’ve replaced the default chrome with a custom set of images, the mouse cursors won’t behave like they would for a normal button. To fix this, we need to enable the buttonMode property and disable the mouseChildren property in the button.

That’s all there is to it!

Sample code for the CSS:

.singleImageButtonStyle
{
    skin: Embed("pathTo/myImages/Image.png");
}

.multipleImageButtonStyle
{
    up-skin: Embed("pathTo/myImages/Up.png");
    down-skin: Embed("pathTo/myImages/Down.png");
    over-skin: Embed("pathTo/myImages/Hover.png");
    disabled-skin: Embed("pathTo/myImages/Disabled.png");
}


Sample code for the MXML:

<mx:Button id="myButton"
    buttonMode="true" mouseChildren="false"
    styleName="multipleImageButtonStyle" />