In this tutorial I have tried to help website developers whose are
interested in graphics design along with development. Especially
windows vista style buttons in their web pages. I choose Adobe
Photoshop CS2 for design the web buttons.

Step 1

Start Photoshop. Create a new document with a White background. Change the Size (width: 120 x height: 35).

Step 2

Select the Rounded Rectangle tool. From Geometry options select
fixed size (W: 118 px – H: 33 px). Make the corner Radius about 5px.
Set the foreground color #3997aa using color picker. Now press and move
mouse pointer to draw the Rounded Rectangle.

Step 3

Select menu Layer -> Layer Style -> Blending Options. Select
Stroke. Change Stroke Size: 2, Position: Inside and Color: #45acc1.

Step 4

Now Select Gradient Overlay. Change Gradient colors using Gradient
Editor. By default you will see two Stop Color e.g. black and white.
You need to add a new Stop Color on center of the two colors by
pressing mouse click e.g. Location: 50. Now change the 2nd Color
Midpoint Location: 5. Now press OK to close Gradient Editor window.

Step 5

Now you see you have only two layers on your document. One is the
Shape 1 and the other is Background. Now unlock the layer by double
click on that layer and a new Layer will be created. Change the Layer
color by Blending Options -> Color Overlay as per your website
background color.

Step 6

Select menu File -> Save For Web. Choose Optimized tab and change
optimized file format to GIF and press Save button to save the Vista
Style button.

Now you become a little graphics designer for your own website.

Thanks again.