Se você precisa personalizar a aparência do botão padrão do Adobe Flex, a melhor saída é utilizar estilos com CSS. Para tanto vamos fazer um exemplo demonstrando passo-a-passo como chegar no resultado obtido na figura abaixo.

O Adobe Flex possui 4 propriedades no CSS
para representar os 4 estados possíveis de um botão ou qualquer
elemento clicável, que são: upSkin, overSkin, downSkin e disabledSkin. Essas propriedades recebem uma imagem como parâmetro, com Embed. Agora é preciso criar as imagens para as quatro propriedades, como as figuras abaixo.

upSkin

overSkin e downSkin

disabledSkin

Após criadas as imagens, é preciso criar o CSS, com o código abaixo:

.buttonStyle
{
   	upSkin:Embed(source="up.png");
   	overSkin:Embed(source="down.png");
   	downSkin:Embed(source="down.png");
   	disabledSkin:Embed(source="disabled.png");
}

Adicione a referência do arquivo CSS ao seu aplicativo Flex e referenciar o botão ao estilo criado com a sintaxe:

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
	<mx:Style source="estilo.css" />
	<mx:Button x="10" y="10" label="Botão com estilo clássico - Adobe Flex" height="20"/>
	<mx:Button x="10" y="40" label="Botão com fundo personalizado" width="243" height="20" styleName="buttonStyle"/>		
	<mx:Button x="10" y="70" label="Botão Desativado com fundo personalizado" width="243" height="20" styleName="buttonStyle" enabled="false"/>		
</mx:Application>

Executando a aplicação, você perceberá que o fundo foi alterado, porém esticou para se ajustar ao tamanho do botão.

Para que a imagem não fique distorcida, é necessário usarmos as propriedades: scaleGridTop, scaleGridBottom, scaleGridLeft, scaleGridRight dentro do CSS. Essas propriedades recebem como parâmetros valores inteiros das posições que ficarão fixas. Para entender como funciona é preciso primeiro dissecar a imagem de fundo.

Perceba que o recorte (linhas azuis) mostra quais são as dimensões
em pixel onde estão localizados os cantos arredondados. Os pontos são
Esquerda=10, Direita=40, Topo=9 e Base=11. A partir dessas coordenadas,
o Adobe Flex fixará as posições dos cantos e somente esticará o
conteúdo que estiver fora das coordenadas.

Então substitua o código do CSS pelo código abaixo.

.buttonStyle
{
 	upSkin:Embed(source="/assets/button_background_up.png",
		scaleGridTop="9", scaleGridBottom="11", scaleGridLeft="10", scaleGridRight="40");
   	overSkin:Embed(source="/assets/button_background_down.png",
		scaleGridTop="9", scaleGridBottom="11", scaleGridLeft="10", scaleGridRight="40");
   	downSkin:Embed(source="/assets/button_background_down.png",
		scaleGridTop="9", scaleGridBottom="11", scaleGridLeft="10", scaleGridRight="40");
   	disabledSkin:Embed(source="/assets/button_background_disabled.png",
		scaleGridTop="9", scaleGridBottom="11", scaleGridLeft="10", scaleGridRight="40");
}

Pronto! Execute a aplicação para ver que a imagem de fundo do botão
não estará esticada. Dessa forma você pode criar aplicações com
interfaces customizadas utilizando o Adobe Flex de uma maneira bastante
simples.

Apenas como um requinte no CSS, vou finalizar o artigo com a
definição das cores do label do botão conforme o seu estado incluindo o
código abaixo dentro do .buttonStyle.

color:#FFFFFF;
	text-roll-over-color:#FFFFFF;
	text-selected-color:#FFFFFF;
	disabled-color:#000000;

Divirta-se!