A great box, a great box, a great box.. Well, well, well. It can be used for several things; Interfaces, Signatures,
Web buttons and so much more, really. Let's get crackin'!

Start by opening a new document, your preffered size and use the Rounded Rectangle Tool and do a box, like mine:



Now go Layer -> Layer Styles -> Gradient Overlay. Use these settings:




Your box should now looks something like this:



Don't exit the Layer Options. Click Stroke and use these settings:



Should look somewhat like this:



Nothing big in this - here comes the step I'll have the toughest job in explaining

I'll try anyways. Select the Rounded Rectangular Marque Tool and drag a small, white box in the very top of the box.
Mine turned out too small. It should look like this:

Rasterize it by doing Layer -> Rasterize -> Shape. I always just select the Pen tool and click once. It gives you a note if you
wish to rasterize it. Click yes, if you choose this way. Much faster. Back to the tut

It should look about like this when you've completed this step:



Mine wasn't nearly wide enough, fixed it afterwards.

Not too prof, aye? Select half of the box, using the Rectangular Marque Tool. Like this:



Press delete. Result should be something like this:



Okay, Next up, use the Magic Wand tool and select the white box. Delete it, but make sure the marking is still there - like this:



Select the Gradient Tool, using the following settings:



Simply drag from the top of your marque to the bottom of it. Simple.
In case you're in doubt, It's either White to Transparent or Foreground to Transparent

If done right, it should look like this when you've dragged it:



It's starting to looks quite good, right? Let's see.. What more can we do about this button (I'm writing as I'm progressing, I ain't got nothing to look after. Just trying...)
a Logo! a Simple one! Right, click the Custom Shape tool (Same menu as a line, the rectangular tool etc. etc.), and select one you like. I chose this:



They can be selected from the top of your workspace...

Now go back to the button of yours and make one (hold shift if you want it to be non-distorted). Nudge it into place. Mine looked like this:



Rasterize the layer. Then, go Layer -> Layer Styles -> Gradient Overlay. Use these settings:



Yes, it IS the same as the background. Now press Stroke. Use these options:



After doing these steps, my image looked like this:




All we need now, is some text. Select the type tool and type something. Use the same technique you used for the symbol. Add a gradient, followed
by a stroke. My final product:



Add a small animation, and it looks as so:



Cheers