Flex4Fun

Following  example  show simple State change Button width

ButtonWithState.mxml

<?xml version="1.0" encoding="utf-8"?>
<!--created:Aug 23, 2010 file:ButtonWithState.mxml  author:Michael -->
<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" viewSourceURL="srcview/index.html">
	<s:states>
		<s:State name="normal"/>
		<s:State name="s1"/>
		<s:State name="s2"/>
		<s:State name="s3"/>
	</s:states>
	<fx:Script>
		<![CDATA[
			protected function clickHandler(event:MouseEvent):void
			{
				this.currentState=event.target.id;
			}
		]]>
	</fx:Script>
	<s:layout>
		<s:HorizontalLayout verticalAlign="middle"
							horizontalAlign="center"/>
	</s:layout>
	<s:Group width="400">
		<s:layout>
			<s:HorizontalLayout horizontalAlign="left"
								verticalAlign="middle"
								gap="0"/>
		</s:layout>
		<s:Button label="Click Me"
				  id="s1"
				  width="100"
				  height="20"
				  width.s1="120"
				  click="clickHandler(event)"
				  resizeEffect="Resize"/>
		<s:Button label="Click Me"
				  id="s2"
				  width.s2="120"
				  width="100"
				  click="clickHandler(event)"
				  resizeEffect="Resize"/>
		<s:Button label="Click Me"
				  id="s3"
				  width.s3="120"
				  width="100"
				  height="20"
				  click="clickHandler(event)"
				  resizeEffect="Resize"/>
	</s:Group>
</s:Application>

Demo and Source

Originally posted 2010-08-23 16:01:00.