<?xml version="1.0" encoding="utf-8"?>

<!--

    ADOBE SYSTEMS INCORPORATED
    Copyright 2008 Adobe Systems Incorporated
    All Rights Reserved.

    NOTICE: Adobe permits you to use, modify, and distribute this file
    in accordance with the terms of the license agreement accompanying it.

-->

<!--- The default skin class for the Spark Button component.  

       @see spark.components.Button
        
      @langversion 3.0
      @playerversion Flash 10
      @playerversion AIR 1.5
      @productversion Flex 4
-->
<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" 
	alpha.disabled="0.5"
	
	transformX="{width/2}"
	transformY="{height/2}"
	>
    
    <!-- host component -->
    <fx:Metadata>
        <![CDATA[ 
        [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>
	
	<fx:Declarations>
		<s:Elastic id="elasticEaser" />
	</fx:Declarations>
	
	<s:transitions>
		<s:Transition fromState="*" toState="over">
			<s:Scale target="{this}" scaleXTo="1.1" scaleYTo="1.1" easer="{elasticEaser}" />
		</s:Transition>
		<s:Transition fromState="*" toState="up">
			<s:Scale target="{this}" scaleXTo="1" scaleYTo="1" easer="{elasticEaser}" />
		</s:Transition>
	</s:transitions>
	
	<s:Ellipse
		
		top="0" bottom="0"
		left="0" right="0"
		>
		<s:fill>
			<s:LinearGradient rotation="270" scaleX="34.5308" x="17.2656" y="34.5312">
				<s:GradientEntry color="#BAD5D8" ratio="0"/>
				<s:GradientEntry color="#E7F1F2" ratio="0.604915"/>
				<s:GradientEntry color="#FFFFFF" ratio="1"/>
			</s:LinearGradient>
		</s:fill>
	</s:Ellipse>
    
	<s:VGroup 
		horizontalAlign="center"
		verticalCenter="0"
		left="5" right="5" top="5"
		gap="1"
		>
		<s:Group
			verticalCenter="0"
			horizontalCenter="0"
			>
			<s:Rect height="11" width="3" x="4" y="0">
				<s:fill>
					<s:SolidColor color="#644C24"/>
				</s:fill>
			</s:Rect>
			<s:Rect height="3" width="11" x="0" y="4">
				<s:fill>
					<s:SolidColor color="#644C24"/>
				</s:fill>
			</s:Rect>
		</s:Group>
		
		<s:Label
			
			color="#644C24"
			fontSize="5"
			textAlign="center"
			width="100%"
			text="{hostComponent.label}"
			/>
	</s:VGroup>
    
</s:SparkSkin>

Here's a simple Button skin that will scale up and down on roll over and out. The important thing to note is that the skin is a simple ellipse with a label so the scale effect needs to happen from the centre point of the skin. To do this you need to set the transformX and transformY properties of the skin to half the width and height of the skin. In this example the skin is an ellipse with a simple plus icon and a label.

Spark Button skin with scaling transition

MXML