Classic Buttons

Step 1.

Open an existing layout/document where you'd like to use these buttons, or just start a new one. I'm using a document that is 780x150 with a background color of: #FAFAFA. And create a new layer.

Step 2.

Using the rectangular marquee tool, make a selection similar to this:

Step 3.

Go to Select->Modify->Smooth and set the smooth setting to 2

and fill this selection with white (#FFFFFF).

Step 4.

Next double click on this layer, and apply the following blending options:

Outer glow:

Gradient Overlay:

Colors used (from left to right) are:

#FFFFFF | #DADADA | #FFFFFF

Step 5.

Next make a new layer, and set your foreground color to: #CD5A09

Get out your Pencil tool, with a brush size of 1 pixel. Zoom in close (you can zoom in/out by holding down the CTRL and pressing the (plus) + and (minus) - keys), and draw the following pair of arrows onto your button.

Step 6.

Now all we need to do is apply some text to our button. These types of buttons usually have a nice pixel font attached to them. I've used a font size of 8pt, and a color of: #767676

The font I've used here is called BM Mini which is, in my opinion the best pixel font available for free.

And that's it, these buttons are great for a nice clean professional look to your layout, or application skins. Have fun and enjoy!