Making a flex button appear flat or transparent does not require any skinning – there are plenty of style options, and all we need to do is find the right setting.
This may sound trivial, since we can make any display object clickable – but since I find myself spending way too much time on this, its time to put this issue to rest.

The Flex framework button class (mx.Button) has a default skin – the halo button skin. I needed a button with no background or highlight – basically a clickable text. Simply setting the background alpha to zero seem to have no effect.

So since the halo skin is being shown anyway, lets try to remove it from the button tag in mxml:

<mx:Button skin='null' />

This will result in a build error:

    Initializer for ‘skin’: cannot parse value of type Class from text ‘null’.

To fix it, put the null inside curly brackets:

<mx:Button skin='{null}' />

Alternatively, we can turn to CSS and define a style for the button:

.myButtonStyle {
	skin:	ClassReference(null);
}

Now just use the the style in the button:

<mx:Button id="myButton" styleName='myButtonStyle' />

The same can be achieved in actionscript code with this line, placed in the script tag:

myButton.setStyle('skin', null);

Download the full source code here.

UPDATE:

For Flex 4, the Spark model requires skin so this approach will not work. Simply create a new spark skin for button and remove all drawing except for the label. Name the skin ‘TransparentButtonSkin’ and in your button set the skinClass the TransparentButtonSkin you just created.

  • Share/Bookmark