Transparent buttons in Flex – the easy way

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.

6 thoughts on “Transparent buttons in Flex – the easy way

  1. The button is very much clickable, although the background isn’t.
    This is meant as a quick way to create a text only button – if you need anything more, you’ll need to implement your own custom skin (much easier with the spark button in Flex 4).

  2. You can still make the background clickable with the spark property of mouseEnabledWhereTransparent=”true”.

    However, I have sometimes had problems getting that to work propertly. So I create a rect in the button skin, give it a fill color and then set the alpha to 0.01 so you cannot see it, but it does pick up the mouse click.

  3. Hy, i have tried your method: but with no luck. If I apply different color style to my html body tag the flash button still remains with default color i.e. no transparency.

Comments are closed.