Button skin issue in Flex - apache-flex

Question

I have created a button skin named HTMLBtnBlue.mxml, I created another skin with copy of HTMLBtnBlue.mxml and named it HTMLBtnYellow and changes up color to 0xF8C313.
code for HTMLBtn.mxml is as follow
<?xml version="1.0" encoding="utf-8"?>
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/halo">
<fx:Style>
#namespace s "library://ns.adobe.com/flex/spark";
#namespace mx "library://ns.adobe.com/flex/halo";
.upStyle {
color: #FF0000;
}
.overStyle {
color: #009900;
}
.downStyle {
color: #00FF00;
}
.disabledStyle {
color: #666666;
}
</fx:Style>
<s:states>
<s:State name="up" />
<s:State name="over" />
<s:State name="down" />
<s:State name="disabled" />
</s:states>
<s:Label
id="labelDisplay"
styleName.up="upStyle"
styleName.over="overStyle"
styleName.down="downStyle"
styleName.disabled="disabledStyle"/>
<s:Rect width="100%" height="1" includeIn="over,up" bottom="0">
<s:fill>
<s:SolidColor color.over="#009900" color.up="#0000FF"/>
</s:fill>
</s:Rect>
</s:Skin>
The code for buttons is as follows
<s:Button label="Open Menu" id="bluebtn" skinClass="skins.HTMLBtn" />
<s:Button label="Close Menu" id="yellowbtn" skinClass="skins.YellowSkin" />
but it applies HTMLBtn skin to both Open Menu and Close Menu button.

Answer 1

Following your example above in Flash Builder 4.6 with AIR 3.4 :
<s:Button id="bluebtn" label="Open Menu" skinClass="skins.HTMLBtnBlue"/>
<s:Button id="yellowbtn" label="Close Menu" skinClass="skins.HTMLBtnYellow"/>
I had no problems with this.
Skin Class "HTMLBtnYellow":
<?xml version="1.0" encoding="utf-8"?>
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/halo">
<fx:Style>
#namespace s "library://ns.adobe.com/flex/spark";
#namespace mx "library://ns.adobe.com/flex/halo";
.upStyle {
color: #FF0000;
}
.overStyle {
color: #009900;
}
.downStyle {
color: #00FF00;
}
.disabledStyle {
color: #666666;
}
</fx:Style>
<s:states>
<s:State name="up" />
<s:State name="over" />
<s:State name="down" />
<s:State name="disabled" />
</s:states>
<s:Rect width="100%" height="1" includeIn="over,up" bottom="0">
<s:fill>
<s:SolidColor color.over="#009900" color.up="#F8C313"/>
</s:fill>
</s:Rect>
<s:Label
id="labelDisplay"
styleName.up="upStyle"
styleName.over="overStyle"
styleName.down="downStyle"
styleName.disabled="disabledStyle"/>
Skin Class "HTMLBtnBlue":
<?xml version="1.0" encoding="utf-8"?>
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/halo">
<fx:Style>
#namespace s "library://ns.adobe.com/flex/spark";
#namespace mx "library://ns.adobe.com/flex/halo";
.upStyle {
color: #FF0000;
}
.overStyle {
color: #009900;
}
.downStyle {
color: #00FF00;
}
.disabledStyle {
color: #666666;
}
</fx:Style>
<s:states>
<s:State name="up" />
<s:State name="over" />
<s:State name="down" />
<s:State name="disabled" />
</s:states>
<s:Label
id="labelDisplay"
styleName.up="upStyle"
styleName.over="overStyle"
styleName.down="downStyle"
styleName.disabled="disabledStyle"/>
<s:Rect width="100%" height="1" includeIn="over,up" bottom="0">
<s:fill>
<s:SolidColor color.over="#009900" color.up="#0000FF"/>
</s:fill>
</s:Rect>