1. Start by make a new document 150 x 75. Add a new layer (Shift+Ctrl+n), call it button and make a selection with the Rectangular Marquee Tool, fixed size 100 x 25. Fill the selection with the Linear Gradient Tool. In this example
I've used white as foreground colour and gray (#999999) as background colour. Drag the gradient from top to buttom.
2. Add a Bevel & Embross Layer Style, Layer > Layer Style > Beveled and Emboss, and set the size to 1. Click ok. Now we are finished making the normal state of the button.
3. Copy the button layer, call it button_own. Open the Bevel and Embross Layer style and change the direction to down. You should now have to layers with different layer styles.
4. Now turn of the visibility by clicking on the eye to the left of the button_down layer. Go to File > Save for Web and save the image.
Do the same once more with the button_down layer visible. Remember to use different names on the two images.
5. The last thing we need do is to insert the two images into your homepage with Dreamweaver. Open Dreamweaver and go to Insert > Rollover Image.
In the new window click on the first Browse.. button (original image) and select the first image you made. And in the second one select the second image. Enter the URL and you are finished. I would recomend that you place the rollover button inside a table.
More Tutorials: 
