Dmitri's blog

Create a button image using any technique you like. To be able to indicate visually that the button is pressed down, it has to be “raised” first.

Here are the Bevel and Emboss layer style settings I used in Photoshop to create the raised button effect for my download button.

UP button layer style

Most settings here are a matter of taste, but the important one for this effect is Direction: Up. Once you are visually pleased with the raised version of the button you’ve created, save the image in the Web format of you choosing (I personally favor png). This will be you Up button.

 Now go back into the layer styles and change the Direction setting to Down. 

DOWN Button layer style

As you can see, the resulting button looks as though it has been pressed down. Same as with the first image, save it in your favorite Web format. You now have both the Up and Down button images.

Now we will use simple JavaScript to handle the toggling as the button is clicked and released.

<img src=”img/button_up.png” alt=”my button” onmousedown=”this.src=’img/button_down.png’;” onmouseup=”this.src=’img/button_up.png’;” onmouseout=”this.src=’img/button_up.png’;”/>

The image source (src) is initially set to the Up version of the button. onmousedown event handler switched the src to the Down version, that’s simple enough. To get your button looking Up again takes two event handlers – onmouseup and onmouseout. The reason two are required is because a person can click the button (causing it to switch to Down) and then drag the cursor off the button instead of releasing the mouse while over the button (let’s say he changed his mind about clicking the button). Unless onmouseout sets the button to Up, the button will remain looking down, which is wrong.