Change color of a Flex 4 spark Button

Question

Is there an easy way to change the background color of a Flex 4 spark Button without messing with skins?

UPDATE: ok, figured it out, simply set the chromeColor attribute of the Button mxml.

Credulity

Answer 1

For spark components, you can use chromeColor style:
<s:Button chromeColor="0xff0000" label="chrome red"/>

Donor

Answer 2

You can change the color style of the button. You can also have a bitmap fill.

Update: The above methods do not change the background.

Easiest way to change the background, you can use - opaqueBackground property.

Here is another way to change the background of a button without changing its skin - 1. Create a group with a rectangle and your button. 2. Set opaqueBackground of your button to null. 3. Make width and height of rectangle to 100% 4. whatever color you fill the rectangle with is the background of your button.

Arcadia

How do I change the color style? If I do <s:Button label="This text will be blue, but not the background" color="#0000FF"/> it just changes the Label, not the background. – Credulity

Answer 3

This can also be done via code like :-

btnID.addEventListener(MouseEvent.MOUSE_OVER, textChange);
btnID.addEventListener(MouseEvent.MOUSE_OUT, textChangeback);

private function textChange(event:MouseEvent):void
{
    btnLinkDelete.setStyle("color", 0xFFFFFF)
    btnLinkDelete.setStyle("chromeColor", 0x535151)
}

private function textChangeback(event:MouseEvent):void
{
    btnLinkDelete.setStyle("color", 0x000000)
    btnLinkDelete.setStyle("chromeColor", 0xfcffff)
}

I am posting it, if anyone want to change background color on mouse hover.

Press