Spark Icon Button with Gradient effects and Filter animation, colorized by styles. Flex 4 (Gumbo)

<s:states>
  <s:State name="up" />
  <s:State name="over" stateGroups="overStates"/>
  <s:State name="down" stateGroups="overStates" />
  <s:State name="disabled" />
</s:states>
.
.
.
<s:Transition  fromState="up" toState="over" autoReverse="true" >
  <s:AnimateColor  targets="{[ge1, ge2, ge3, ge4]}"  duration="250" />
</s:Transition>
<s:Transition  fromState="over" toState="up" autoReverse="true" >
  <s:AnimateColor targets="{[ge1, ge2, ge3, ge4]}" duration="750" />
</s:Transition>
.
.
.
<s:fill>
  <s:LinearGradient x="32.019" y="0.5" scaleX="25.5708" rotation="90">
	<s:GradientEntry id="ge1" color="#c0c0c0" color.overStates="#ffffff" ratio="0"/>
	<s:GradientEntry id="ge2" color="#939393" color.overStates="#e3e3e3" ratio="0.5"/>
	<s:GradientEntry id="ge3" color="#7e7e7e" color.overStates="#cecece" ratio="0.5"/>
	<s:GradientEntry id="ge4" color="#6a6a6a" color.overStates="#bbbbbb" ratio="1"/>
  </s:LinearGradient>
</s:fill>

<s:Transition  fromState="over" toState="down" autoReverse="true" >
   <s:Animate duration="150" targets="{[dsfBg, dsfSymbol]}" >
	<s:SimpleMotionPath  property="strength" />
  </s:Animate>
</s:Transition>
<s:Transition  fromState="down" toState="*" autoReverse="true" >
  <s:Animate duration="150" targets="{[dsfBg, dsfSymbol]}" >
	<s:SimpleMotionPath property="strength"  />
  </s:Animate>
</s:Transition>
.
.
.
<s:filters>
  <s:DropShadowFilter id="dsfBg" alpha="0.5" blurX="0" blurY="0" distance="1" strength="1" strength.down="0"  />
</s:filters>
.
.
.
<s:filters>
  <s:DropShadowFilter id="dsfSymbol" blurX="0" blurY="0" distance="1"  strength="1" strength.down="0"/>
</s:filters>

@namespace mx "library://ns.adobe.com/flex/halo";
@namespace s "library://ns.adobe.com/flex/spark";
 
/*   
 *	Using ID selectors with compund selectors (type and class selectors) 
 *	to define the appearance of the buttons 
 */
 
/* Define normal state styles on spark button type inside a desc container */
#desc s|Button {
	skinClass: ClassReference('AHSimpleIconButtonSkin');
	baseColor: "0x505050" ; /* Do not use black black; /*"0x56d9e5";*/
	color: #FFFFFF;
}
 
/* Define over states styles on spark button type inside a desc container */
#desc s|Button:over {
	baseColor: "0x97CD20";
}
 
/* Define down states styles on spark button type inside a desc container */
#desc s|Button:down {
	baseColor: "0xa0d828";
}
 
/* compound. override the over state of the button in element desc for class styleClass blueButton */
#desc .blueButton:over {
	baseColor: "0x56d9e5";
}
 
/* compound. override the down state of the button in element desc for class styleClass blueButton */
#desc .blueButton:down {
	baseColor: "0x56d9e5";
}
 
/* compound. override the over state of the button in element desc for class styleClass redButton */
#desc .redButton:over {
	baseColor: "0xd52A03";
}
 
/* compound. override the down state of the button in element desc for class styleClass redButton */
#desc .redButton:down {
	baseColor: "0xE53A13";
}
.
.
.
<s:HGroup id="desc" horizontalCenter="0" verticalCenter="0" verticalAlign="middle" gap="5">
	<s:Button  label="Green" 	useHandCursor="true" buttonMode="true" />
	<s:Button  label="Blue" 	useHandCursor="true" buttonMode="true" styleName="blueButton"/>
	<s:Button  label="Red" 		useHandCursor="true" buttonMode="true" styleName="redButton"/>
</s:HGroup>

<fx:Script>
<![CDATA[         
	/* Define the skin elements that should not be colorized. 
	exclude symbol and text group */
	static private const exclusions:Array = ["symbol", "textGroup"];
 
	/** 
	 * @copy spark.skins.SparkSkin#colorizeExclusions
	 */		
	override public function get colorizeExclusions():Array {return exclusions;}
]]>        
</fx:Script>
.
.
.
<!-- The group with the symbol with a shadow applied to. In a group for colorization exclusion -->
<s:Group id="symbol" verticalCenter="0" left="7" top="9" right="7" bottom="7">
	<s:filters>
		<s:DropShadowFilter id="dsfSymbol" blurX="0" blurY="0" distance="1"  strength="1" strength.down="0"/>
	</s:filters>
	<s:Path winding="nonZero" data="M12.6924 0L5.76855 6.92383 2.30762 3.46191 0 5.76855 3.46191 9.23145 5.76855 11.5391 8.07617 9.23145 15 2.30762 12.6924 0Z" >
		<s:fill>
			<s:SolidColor color="#ffffff"/>
		</s:fill>
	</s:Path>
</s:Group>