Step 1

Start with a new document, 75 px by 25 px with a transparent background.

Step 2

Grab your rectangular marquee tool and on the tab for its settings, use the following settings:

Step 3

Now click on your document and position it in the center of the image (there should be 1 pixel left above, below, on the left, and on the right of the selection).

Step 4

Go to Select>Modify>Smooth and use a 3 pixel radius.

Step 5

Now fill your selection with #dddbde. Deselect by hitting Ctrl+D on your keyboard.

Step 6

Click blending options for that layer and create an inner glow using the following settings:


Give it a small stroke using these settings:


Now give it a gradient overlay with the following settings:

Step 7

Add some text to the middle of the button and you have your normal button state.

Step 8

Now we're going to make the "over" state. The over state appears when your mouse rolls over the button. Start off by duplicating what should be your only layer.

Step 9

Go into blending options and edit the inner glow settings to the following (anything different from previous settings are highlighted):


Give it a color overlay with these settings:


A stroke like so:

And now you have your over state!

Step 10

The last state is the "hit" state. This appears when your mouse is clicked on the button. Start off by duplicating your "over" layer.

Step 11

Edit your blending options again. First start with the inner glow:


Change the color overlay:


And lastly, change the stroke:


Lastly for this state, move the text 1 pixel to the right and 1 pixel to the left by using your move tool. You now have your hit state!

Step 12

You'll now need to save your normal, over, and hit states as separate .jpg files. You can do this by making only one of the layers visible and saving the image. Then make another layer visible and save that state. Do this for the three states.

Click for Part 2 >

The implementing of this button on your website can be tricky business. Part 2 covers how to do this easily using Adobe ImageReady.