<?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/halo"
    frameRate="99" 
    minWidth="1024" minHeight="768" backgroundColor="0xdfefee" viewSourceURL="srcview/index.html">
    <s:layout>
        <s:BasicLayout/>
    </s:layout>
    
    <fx:Style>
        @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";
        }
        
    </fx:Style>
    
    <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>
    
</s:Application>