irregular shaped button

You can create a custom Button skin that uses graphics that aren't necessarily square by using a Path and mouseEnabledWhereTransparent=false.  For example here is a custom button skin that looks like a diamond:

 

CustomButtonSkin.mxml:

<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" 
             minWidth="21" minHeight="21" alpha.disabled="0.5"
             mouseEnabledWhereTransparent="false">
    
    <fx:Metadata>
        <![CDATA[ 
            [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:Path data="M 50 0 L 0 50 L 50 100 L 100 50 L 50 0" top="0" left="0" right="0" bottom="0">
        <s:fill>
            <s:SolidColor color="red" alpha="1" alpha.over="0.8" alpha.down="0.5" />
        </s:fill>
    </s:Path>
    
    <s:Label id="labelDisplay"
             textAlign="center"
             verticalAlign="middle"
             horizontalCenter="0" verticalCenter="1" />
    
</s:SparkSkin>

 

Main.mxml:

 

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark">

 

    <s:Button label="diamond button" skinClass="CustomButtonSkin" />
    
</s:Application>