Trendy Bevel Buttons

Step 1.

Open an existing document, or start a new one of any size. I'm using 500 x 300 with a simple grid background.

Step 2.

Create a new layer and using the rectangular marquee tool make a selection.

Fill this selection with white (#FFFFFF)

Step 3.

Double click this layer, and apply the following blending options:

Gradient Overlay

Because it's difficult to see at this point, I've added a "lime green" highlight around the result, here's how yours should look (less the green highlight of course):

Step 4.

Create a new layer. Now set your foreground color to: #4A4A4A and get out the 'Pencil Tool'. Draw a 1 pixel line across the top of your box, and down the left side as pictured:

Step 5.

Finally set your foreground color to: #131313 (dark dark grey) and again with the Pencil Tool, draw a 1 pixel line along the bottom of your box, and down the right side, as pictured:

And that's all there is to it. All you need to do now is add text, and icons and you're finished. Here's what I ended up with after fooling around with it for a few minutes: