Css自定义Button的皮肤

guangqiang

<?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:mx="library://ns.adobe.com/flex/mx">     <fx:Metadata>        <![CDATA[        [HostComponent("spark.components.Button")]        ]]>    </fx:Metadata>    <s:states>        <s:State name="up"/>        <s:State name="over"/>        <s:State name="down"/>        <s:State name="disabled"/>    </s:states>    <!--Add dropshadow for the up state only-->    <s:Rect radiusX="4"            radiusY="4"            top="0"            bottom="0"            left="0"            right="0"            includeIn="up">        <s:fill>            <s:SolidColor color="0"/>        </s:fill>        <s:filters>            <mx:DropShadowFilter knockout="false"                                 blurX="5"                                 blurY="5"                                 alpha="0.6"                                 distance="5"/>        </s:filters>    </s:Rect>     <!--Orginal FXG-->    <s:Rect id="myBorder"            radiusX="4"            radiusY="4"            top="0"            bottom="0"            left="0"            right="0">        <s:fill>            <s:SolidColor color="0x3c5297"/>        </s:fill>        <s:stroke>            <s:SolidColorStroke color="0x434859"                                weight="2"                                color.over="0xacd4fc"                                color.down="0xfd0303"/>        </s:stroke>    </s:Rect>     <!--Add Hight Light on the top-->    <s:Rect radiusX="4"            radiusY="4"            top="2"            left="2"            right="2"            height="50%">        <s:fill>            <s:LinearGradient rotation="180">                <s:GradientEntry color="0xFFFFFF"                                 alpha=".3"/>                <s:GradientEntry color="0xFFFFFF"                                 alpha=".1"/>            </s:LinearGradient>        </s:fill>     </s:Rect>    <s:Label text="{hostComponent.label}"             color="0xFFFFFF"             textAlign="center"             verticalAlign="middle"             horizontalCenter="0"             verticalCenter="1"             left="12"             right="12"             top="6"             bottom="6"/>     <!--Add More effect -->    <s:transitions>        <s:Transition>            <s:CrossFade target="{myBorder}"/>        </s:Transition>    </s:transitions><?xml version="1.0" encoding="utf-8"?><!--created:Nov 9, 2010 file:CSSandSkin.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:layout>        <s:VerticalLayout verticalAlign="middle"                          horizontalAlign="center"                          gap="30"/>    </s:layout>     <fx:Style>        @namespace s "library://ns.adobe.com/flex/spark";        @namespace mx "library://ns.adobe.com/flex/mx";        s|Button        {            skin-class:ClassReference("skins.MyButtonSkin1");        }    </fx:Style>    <s:Button label="button with skin 1"/>    <s:Button label="button with skin 2"/>    <s:Button label="button with skin 3"/></s:Application> </s:SparkSkin>