OnClick Effects with Buttons
The last article I posted here showed how to add hover effects to CSS-styled buttons. It is possible to use a similar technique to add onclick effects with CSS. This technique works well in Safari and Firefox, but not quite so reliably in Internet Explorer so you may want to combine this technique with the onclick support of Javascript libraries like MooTools.
The first thing to do is add another image to our button sprite. We’re going to add a green version of the button to display when the button is clicked. Here is our button sprite with all three variants.
To create the onclick effects, we are going to use the CSS :active pseudo class. The CSS code itself is almost identical to the CSS code used in the hover effects.
#dialog a:active, #dialog a:active span {
color: #74A074;
background-position: left -44px;
}
#dialog a:active {
background-position: right -44px;
}
The only difference between this CSS code and the hover CSS code is that the :active pseudo class is now being using instead of :hover, and the background position has been shifted up by another 22px to display our third button image (we also changed the text color of the button to coordinate). Now when you click on the button, you’ll see the following effect.
As mentioned earlier, you have to be a bit more cautious with this trick because MSIE doesn’t work so well, but using Javascript and onclick events you can set the background position programatically to get the same result.
