Below is a short description of the different CSS classes used to render the different states of the cool button as well as an explanation of how the disabled look was achieved for IE. This information can be useful if you want to modify how the buttons look in your application. You should also take a look at the demo page and see how you can change the background color for a specific set of buttons.

The CSS Classes

coolButton

This is the class describing a flat button. This is the state a button is put in directly after creation. This state does not have a border and images inside the button are made grey using a filter.

.coolButton img {
   filter: gray();
}

coolButtonHover

This is the state of a raised button and is used for flat buttons when the mouse is over the button. It is also used for a button with always up set to true as well as a focused button. This button has a border and the images are not grayed out.

coolButtonActiveHover

This is the class used for a button that is pressed and the mouse is still over the button. It is also used for a focused button that has toggle and a value of true. The button has a one pixel border and the padding is changed to move the content a little to make it look like it has been pressed.

.coolButtonActiveHover {
   border-width:        1px;
   border-left-color:   ButtonShadow;
   border-right-color:  ButtonHighlight;
   border-top-color:    ButtonShadow;
   border-bottom-color: ButtonHighlight;
   padding:             2px 3px 0px 5px;
}

coolButtonActive

This state represents a pressed button that is not highlighted. This is only used for a toggle button with a value of true that is not focused or hovered. This state also has a background image where every other pixel is white and the rest are transparent. this gives the same look and feel as Windows is using for pressed toggle buttons. Notice that you maybe need to update the background-image property in the css file to point to the right image.

.coolButtonActive {
   border-width:        1px;
   border-left-color:   ButtonShadow;
   border-right-color:  ButtonHighlight;
   border-top-color:    ButtonShadow;
   border-bottom-color: ButtonHighlight;
   padding:             2px 3px 0px 5px;
   background-image:    url("images/cbback.gif");
}

The disabled classes

There are three different classes for the disabled states. These are:

coolButtonDisabled Flat disabled look
coolButtonActiveDisabled Pressed disabled look used for a disabled toggle button with the value set to true.
coolButtonUpDisabled Raised disabled look used for a disabled button with always up set to true.

The disabled buttons are rendered different in Mozilla and IE because the disabled look is accomplished using filters and Mozilla does not have anything remotely close to filters. In Mozilla we only change the color of the text to GrayText and make the images semi transparent (buggy).

.coolButtonUpDisabled img,
.coolButtonActiveDisabled img,
.coolButtonDisabled img {
   -moz-opacity: 0.5;
}

The filter effect

For IE we use filters but to be able to achieve the look we also need to add some extra HTML elements around the original content. This is done when the button changes its enabled value and it looks like this:

if (enabled)
   this.innerHTML = this.firstChild.firstChild.innerHTML;
else
   this.innerHTML = "<span class='coolButtonDisabledContainer'><span class='coolButtonDisabledContainer'>" +
                    this.innerHTML + "</span></span>";

As you can see IE adds two spans around the content and these allow more sophisticated effects using filters to be achieved. Below is a step by step instruction of how the disabled look is accomplished. (If you are using Mozilla you will only see plain text below.)

The first step is to make really bright areas of the button "transparent". This is done by using the chroma filter. To reduce the number of colors to remove, the color info of the button is first removed using the gray filter. The colors removed are the brightest shade of gray (#ffffff to #f3f3f3) and these where defined by trial and error. In the sample below we have added a container with blue background just to make it clearer what has been removed.

Test Container

The innermost span uses the mask filter to mark what is not originally painted. It makes it look something like this:

Test Container

The other span then sets the background color which makes it looks something like this:

Test Container

After this we use the chroma filter to remove the red color in the example above, making it look something like this:

Test Container

Finally we add a dropShadow filter to achieve the sunken look. This is added to the outermost span after the chroma filter.

Test Container

Combining all this and using some more appropriate colors we get the following css rules for the disabled states:

.coolButtonUpDisabled     .coolButtonDisabledContainer,
.coolButtonActiveDisabled .coolButtonDisabledContainer,
.coolButtonDisabled       .coolButtonDisabledContainer {
   display:        block;
   background:     GrayText;
   filter:         chroma(color=#010101) dropshadow(color=ButtonHighlight, offx=1, offy=1);
   width:          100%;
   height:         100%;
   vertical-align: center;
}

.coolButtonUpDisabled     .coolButtonDisabledContainer .coolButtonDisabledContainer,
.coolButtonActiveDisabled .coolButtonDisabledContainer .coolButtonDisabledContainer,
.coolButtonDisabled       .coolButtonDisabledContainer .coolButtonDisabledContainer {
   background:     Transparent;
   filter:         gray()
                   chroma(color=#ffffff) chroma(color=#fefefe) chroma(color=#fdfdfd)
                   chroma(color=#fcfcfc) chroma(color=#fbfbfb) chroma(color=#fafafa)
                   chroma(color=#f9f9f9) chroma(color=#f8f8f8) chroma(color=#f7f7f7)
                   chroma(color=#f6f6f6) chroma(color=#f5f5f5) chroma(color=#f4f4f4)
                   chroma(color=#f3f3f3)
                   mask(color=#010101);
}

Cool Button 2
The CSS Classes
Demo Page

Author: Erik Arvidsson