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>