How to make transparent background of a Flex button

Question

I want to make a Flex button that has it's background transparent in order to apply css to the page and affecting the flash.

I tried, but with no luck:

<mx:Button skin="{null}" x="0" y="0" label="Submit"/>

Answer 1

When using a Spark Button, you can apply a custom skin that leaves out all the chrome.
You can apply a custom skin like this:

<s:Button label="Submit" skinClass="TransparentButtonSkin"/>

@Panciz' solution will probably work, but the skin can be made much more lightweight by simply leaving out all the components that you don't need.

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

    <fx:Metadata>
        [HostComponent("spark.components.Button")]
    </fx:Metadata>

    <s:states>
        <s:State name="up"/>
        <s:State name="over"/>
        <s:State name="down"/>
        <s:State name="disabled"/>
    </s:states>

    <s:Rect id="hitZone" left="0" right="0" top="0" bottom="0">
        <s:fill>
            <s:SolidColor alpha="0"/>
        </s:fill>
    </s:Rect>

    <s:Label id="labelDisplay" left="0" right="0" top="0" bottom="0"
             horizontalCenter="0" verticalCenter="0"
             textAlign="center" maxDisplayedLines="1" verticalAlign="middle"/>

</s:SparkButtonSkin>

Notice the hitzone transparent graphic: that is necessary because otherwise you would click through the transparent section of the Button.

Answer 2

The simplest way is using mx:LinkButton, unfortunately LinkButtonSkin hardcoded alpha=1 for all states but you can override it:

package
{
import flash.geom.Matrix;

import mx.skins.halo.LinkButtonSkin;

public class LinkButtonAlphaSkin extends LinkButtonSkin
{
    public function LinkButtonAlphaSkin()
    {
        super();
    }

    override protected function drawRoundRect(x:Number, y:Number, width:Number, height:Number, cornerRadius:Object=null, color:Object=null, alpha:Object=null, gradientMatrix:Matrix=null, gradientType:String="linear", gradientRatios:Array=null, hole:Object=null):void
    {
        super.drawRoundRect(x, y, width, height, cornerRadius, color, 0, gradientMatrix, gradientType, gradientRatios, hole);
    }
}
}

Usage:

<mx:LinkButton label="lala" skin="LinkButtonAlphaSkin"/>