[SOLVED] Make the Flex4 Button look exactly like the Flex3 Button

Make the Flex4 Button look exactly like the Flex3 Button

If I had a button in Flex3

<mx:Button label="Testing" cornerradius='5'/>

And I want to change this to Flex4

<s:Button label="Testing" styleName="buttonStyle"/>
<fx:Style>
    .buttonStyle{
    corner-radius:5;
    font-weight:bold;
}
</fx:Style>

What all do I need more to make the Flex 4 button, look exactly like the Flex 3 button?

The things that I can see right now are 1. The mouse-over-button gradients are very different. 2. The border for Flex4 button is different from Flex3.

How do I fix these two conditions, and are there more differences as well?

Solution

This can be easily done by creating a custom skin for the button.

<s:Button label="Testing" skinClass="com.myApp.Flex3ButtonSkin"/>

And inside the Skin class, modify the mxml objects within to make it look like the Flex 3 Button. With skin classes you can make the buttons and any other component look like anything.