Changing the fill colors of a Button control in Flex

The following example shows how you can change the background fill colors and fill alphas of a Button control in Flex by setting the fillColors, and fillAlphas styles.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/01/02/changing-the-fill-colors-of-a-button-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Button id="button2"
            label="2 fill colors defined"
            fillColors="[red, haloOrange]" />

    <mx:Button id="button4"
            label="4 fill colors defined"
            fillColors="[red, haloOrange, haloGreen, haloBlue]" />

    <mx:Button id="buttonSolid"
            label="solid fill"
            fillColors="[red, red]" />

    <mx:Button id="buttonSolidOpaque"
            label="solid opaque fill"
            fillAlphas="[1.0, 1.0]"
            fillColors="[red, red]" />

</mx:Application>

View source is enabled in the following example.

You can also set the fillColors and fillAlphas styles using an external .CSS file or <mx:Style /> block, as shown in the following snippet:

<mx:Style>
    Button {
        fillAlphas: 1.0, 0.4;
        fillColors: haloBlue, haloGreen;
    }
</mx:Style>

<mx:Button id="button" label="Button" />

Or, you can set the fillColors and fillAlphas styles using ActionScript, as shown in the following snippet:

<mx:Script>
    <![CDATA[
        private function init():void {
            button.setStyle("fillAlphas", [1.0, 0.4]);
            button.setStyle("fillColors", ["haloBlue", "haloGreen"]);
        }
    ]]>
</mx:Script>

<mx:Button id="button" label="Button" initialize="init();" />

For an example of changing the fillColors and fillAlphas styles for a ButtonBar control, see “Changing the fill colors of a ButtonBar control in Flex”.

The default values for the Button fillAlphas style in Flex 3 is: [0.6, 0.4, 0.75, 0.65], and the default value for the fillColors style is: [#FFFFFF, #CCCCCC, #FFFFFF, #EEEEEE].