Nothing To Lose

• Start with a canvas of comfortable size, say around 400×600. Even though our button is going to be small, its some times easier to work on a bigger canvas and then to crop to the actual size.
• Now we will make a square selection, from the tool box, select rectangular selection tool. Set the following in its setting, Anti-aliasing, Rounded Corners: Radius 20 and Fixed size: 150×150px.
• Now do a selection in center of the canvas, you should get a selection of 150×150px automatically with rounded corners. ( See Image 1 )

• Select some dark blue (I used #0000E2) as you foreground color, the select the gradient fill tool. In the settings choose, Mode: Multiply, Gradient: foreground to background RGB. Offset: 20, Shape: linear, Check Dithering and Adaptive supersampling.
• Now using the gradient fill tool click at the bottom of the selected square selection and drag till the upper part of the selection. You should see an image similar to IMAGE 2
• Run the previous step again but this time start from a bit out side the upper part of the square selection and drag just almost till the blue start to appear and leave the mouse button. You should get some thing similar to IMAGE 3.
• Now just cut and paste the selected area againl (^c and ^v). Press ^L to invoke the layer dialouge box, you will see a floating layer, click on the lower left icon/button (create new layer) of the dialog box, this will make the floating layer as a new seperate layer. Name this layer as (button-gradient)
• Next select the button-gradient layer to work on from layer dialog box, press ^a and ^c, this will select that layer and paste a copy of the layer again.
• Now select a even darker blue (#000080) as foreground color, go to edit menu and click on “Fill with foreground color”. Your image should be filled with the new blue color, Go to the layer dialog box and paste this as a new layer. Lets call it as the dark-border layer.
• Next select your latest layer to work on, use “fuzzy select tool” to select all, it should select the outside of the box. Next from “select” menu choose, “shrink”. Use shrink value of 5px. You should get an image similar to IMAGE 4.
• Hit the delete key, and you will be able to see the gradient layer!!!!.
  IMAGE 5
• Now the button is ready. But it looks a bit flat. So lets add some shadow to the button. Select the dark-border layer to work upon. Go to filters, select “light and shadow” => “Drop Shadow”, set parameter to x and y offset to 0 (zero), and hit ok.
• And your button is ready. Enjoy.
  IMAGE 6
• For actual usage, its better to delete the background (White) layer, and then re-size the image to the Shadow layer.

Here are some sample buttons in different colors and gradients.