The following example shows how you can modify the default skins for the Flex Button control by setting the skin, upSkin, overSkin, downSkin, and disabledSkin styles.
Full code after the jump.
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/08/20/changing-the-default-skins-on-a-button-control-in-flex/ -->
<mx:Application name="Button_upSkin_test"
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:Button id="btn"
label="Button"
skin="{null}"
upSkin="{null}"
overSkin="mx.skins.halo.ButtonSkin"
downSkin="mx.skins.halo.ButtonSkin"
disabledSkin="mx.skins.halo.ButtonSkin"
icon="@Embed('assets/Button.png')" />
</mx:Application>
View source is enabled in the following example.
You can also set the various button skin styles in an external .CSS file or <mx:Style /> block, as seen in the following example:
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/08/20/changing-the-default-skins-on-a-button-control-in-flex/ -->
<mx:Application name="Button_upSkin_test"
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:Style>
Button {
skin: ClassReference(null);
upSkin: ClassReference(null);
overSkin: ClassReference("mx.skins.halo.ButtonSkin");
downSkin: ClassReference("mx.skins.halo.ButtonSkin");
disabledSkin: ClassReference("mx.skins.halo.ButtonSkin");
icon: Embed("assets/Button.png");
}
</mx:Style>
<mx:Button id="btn"
label="Button" />
</mx:Application>
Or, you can set the button skin styles using ActionScript, as seen in the following example:
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/08/20/changing-the-default-skins-on-a-button-control-in-flex/ -->
<mx:Application name="Button_upSkin_test"
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:Script>
<![CDATA[
import mx.skins.halo.ButtonSkin;
[Embed("assets/Button.png")]
private const buttonIcon:Class;
private function init():void {
btn.setStyle("skin", null);
btn.setStyle("upSkin", null);
btn.setStyle("overSkin", ButtonSkin);
btn.setStyle("downSkin", ButtonSkin);
btn.setStyle("disabledSkin", ButtonSkin);
btn.setStyle("icon", buttonIcon);
}
]]>
</mx:Script>
<mx:Button id="btn"
label="Button"
initialize="init();" />
</mx:Application>

{ 2 comments… read them below or add one }
So how would one create and use custom control skins?
Hi Peter,
i want to put the close button (the “x” on the upper right ) outside the window AND change the appearance of it (bigger, or a complete other design).
Is that possible…?
Thank you,
regards
Michael