<?xml version="1.0"?>
<!-- Example for changing the look of the selected button for a ButtonBar -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" backgroundColor="0xFFFFFF">

<mx:Style>
    .selectedStyle {
        fillColors: #FFFFFF, #FF9933;
    }
   
    .unselectedStyle {
        fillColors: #FFFFFF, #E7E7E7;
    }
   
</mx:Style>
<mx:Script>
<![CDATA[
    import mx.controls.Button;
    
    private function changeHandler(): void
    {
        for(var i:int=0; i < bb.dataProvider.length; i++)
        {
            var button1:Button = Button(bb.getChildAt(i));
            if(button1.selected)
            {   
                button1.styleName="selectedStyle";
            }
            else
            {
                button1.styleName="unselectedStyle";
            }
        }
        
    }
]]>
</mx:Script>

    <mx:ToggleButtonBar id="bb" borderStyle="solid" itemClick="changeHandler()"
        creationComplete="changeHandler()">
        <mx:dataProvider>
            <mx:String>Flash</mx:String>
            <mx:String>Director</mx:String>
            <mx:String>Catalyst</mx:String>
            <mx:String>ColdFusion</mx:String>
        </mx:dataProvider>
    </mx:ToggleButtonBar>
</mx:Application>