Flex buttons and styles

Question

I am creating a SWF file using a MXML file. The MXML file define several MX:Button and uses an external stylesheet to style them.

There is a problem I am facing at the moment, I am aiming to style the buttons in a way that is similar to the way I can style HTML button elements. However, I could not achieve such look and feel. For example, I could not find a way to define the color and thickness of the borders for each side of the button (top, bottom, left, right), the background color, the margins, the padding, the width, and the height of the button. Also, selector such as hover, active, focus are not available. I was only able to change the size and the font color of the button successfully.

I know that I might be missing something, so I decided to ask for help. Can anyone provide an example of a style sheet that can override the mentioned attributes.

Thank you.

Answer 1

You could use the Flex Style Explorer to visually help you achieving the effect you want to give to your Flex application.

These links also might be helpful :

• Styling with Flex 3.0 using CSS

• Designing Flex 3 skins and styles

Answer 2

You might also want to look at degrafa skinning too.. You can skin almost any component with degrafa the way you like.. you can even add your own custom css selectors. A few links to get you started with skinning buttons..

http://www.asfusion.com/blog/entry/flex-skinning-with-degrafa-screencast-part-1

http://groups.google.com/group/degrafa/web/round-flex-button-component-skin-sample?version=5

http://blog.vixiom.com/2008/08/05/skinning-a-flex-button-with-one-mxml-file-and-degrafa/

by using degrafa to skin your buttons, you can handle any css selectors and draw the button accordingly with the power of degrafa. Good Luck!