Applying styles to different states on a Spark Button control in Flex 4

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/08/10/applying-styles-to-different-states-on-a-spark-button-control-in-flex-4/ -->
<s:Application name="Spark_Button_CSS_states_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/halo">
 
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
 
        s|Button {
            baseColor: haloBlue;
            color: white;
        }
 
        s|Button:down,
        s|Button:over {
            baseColor: haloGreen;
            color: black;
        }
 
        s|Button:disabled {
            baseColor: haloSilver;
            color: red;
        }
    </fx:Style>
 
    <s:CheckBox id="checkBox"
            label="enabled"
            selected="true"
            left="10" top="10" />
 
    <s:Button id="btn"
            label="Spark Button"
            enabled="{checkBox.selected}"
            buttonMode="true"
            horizontalCenter="0" verticalCenter="0" />
 
</s:Application>