How to put a simple gradient in de buttons of a buttonbar in Flex 4?

How on earth do you put a simple gradient with css in the buttons of a buttonbar? I've been looking everywhere and I'm not interested in skinning at all it seems weird having all that dirty code to have just a simple gradient.

This is my css

.my_ButtonBar{
    buttonStyleName: "buttonBarButton"; 
    firstButtonStyleName: "firstButtonBarButton"; 
    lastButtonStyleName: "lastButtonBarButton";
}

.buttonBar开发者_如何学JAVAButton 
{
    fillColors: red, red;
}

And this is my mxml

<s:ButtonBar dataProvider="{viewstack}" width="200" top="0" left="0" styleName="main_ButtonBar">
    <s:layout>
        <s:TileLayout columnWidth="200" rowHeight="50"
                horizontalGap="-1" verticalGap="-1" />
    </s:layout>
</s:ButtonBar>

After user700284's response I created a new skinclass based on the buttonbar class.

<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" 
        alpha.disabled="0.5">

    <fx:Metadata>
    <![CDATA[ 
       /** 
         * @copy spark.skins.spark.ApplicationSkin#hostComponent
         */
        [HostComponent("spark.components.ButtonBar")]
    ]]>
    </fx:Metadata> 

    <s:states>
        <s:State name="normal" />
        <s:State name="disabled" />
    </s:states>

    <fx:Declarations>
        <fx:Component id="firstButton">
            <s:ButtonBarButton skinClass="spark.skins.spark.ButtonBarFirstButtonSkin" />
        </fx:Component>

        <fx:Component id="middleButton" >
            <s:ButtonBarButton skinClass="spark.skins.spark.ButtonBarMiddleButtonSkin" />
        </fx:Component>

        <fx:Component id="lastButton" >
            <s:ButtonBarButton skinClass="spark.skins.spark.ButtonBarLastButtonSkin" />
        </fx:Component>
    </fx:Declarations>

    <s:DataGroup id="dataGroup" width="100%" height="100%">
        <s:layout>
        <s:TileLayout columnWidth="200" rowHeight="50"
            horizontalGap="-1" verticalGap="-1" />
        </s:layout>
    </s:DataGroup>
</s:Skin>

If I add a rect fill it will fill up the entire buttonbar instead of each button individually. How can I just put a simple gradient on the buttons?????

I do not think you will be able to control the fillColors through a CSS because spark Button does not support fillColors style.Check the following link:

http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/spark/components/Button.html#commonstyleSummary

So you might have to resort to creating skins for buttons. :(

There is a Spark style 'chromeColor' that modifies the default colors. FTQuest