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);
}