Ans:

In this example you can see how we can make a skin for a component.

main.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
   xmlns:s="library://ns.adobe.com/flex/spark" 
   xmlns:mx="library://ns.adobe.com/flex/mx" 
   minWidth="955" minHeight="600">
<s:Panel title="Skin state Example" width="169">
<s:Button id="skinButton" 
  label="Skin Button" 
  x="28" y="30" 
  skinClass="CustomSkin"/>
</s:Panel>
</s:Application>

CustomSkin.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" 
 xmlns:s="library://ns.adobe.com/flex/spark" 
             xmlns:fb="http://ns.adobe.com/flashbuilder/2009" 
 minWidth="21" minHeight="21">    
    <!-- host component -->
    <fx:Metadata>
        [HostComponent("spark.components.Button")]
    </fx:Metadata>
<!-- states -->
<s:states>
<s:State name="up" />
<s:State name="over" />
<s:State name="down" />
<s:State name="disabled" />
</s:states>
<s:Rect left="0" right="0" top="0" bottom="0" 
width="69" height="20" radiusX="20" radiusY="20">
<s:stroke>
<s:SolidColorStroke color="0x000000" weight="2"/>
</s:stroke>
<!-- Add this fill to make the "hit area" cover the entire button. -->
<s:fill>
<s:SolidColor color="0xFFFFFF"/>
</s:fill>
</s:Rect>    
    <s:Label id="labelDisplay"
 color.up="red" color.over="Green" color.down="blue"
             horizontalCenter="0" verticalCenter="0"
             left="10" right="10" top="10" bottom="10" 
 fontFamily="verdana" fontWeight="bold">
    </s:Label>    
</s:SparkSkin>