Gel Button

1. Make a new document, 200 wide by 200 high. Select the colour 18BE0C as your foreground colour. Then select the rounded rectangle tool, set the radius of the tool to 20px and draw a rectangle the size that you want your button to be.

2. Right click on the layer and select Rasterize Layer option. Then right click on the layer again and select Blending Options. Don't close the window that opens until the last stage.

In the, now opened, layer style window click inner shadow, set the variables as below.

Blend Mode : Normal
Colour : FFFFFF (white)
Opacity : 60%
Angle : 90
Distance : 10px
Spread : 0%
Size : 0px

3. Now click gradient overlay. Set the colour to 0034A9 and other variables as follows:

In the Gradient heading:

Opacity : 60%
Style : linear
Colour : from 999999 to FFFFFF.

4. Now select stroke and set up the options as below:

Size : 1px
Posisiton : outside
Blend Mode : Normal
Distance : 4px
Colour : 16A00B

5. Next move on to the inner glow options.

Size : 5px
Opacity : 60%
Colour : FFFFBE

6. Last Step! Select the drop shadow option.

Angle : Untick 'Use global Angle' and enter 120
Spread : 2px
Size : 5px

You can now click ok on the layer style window, because the effect is finished.

Gel Button Tutorial: Final Result

Finished, the shorter the height compared with the width the move effective this style looks. It works great on navigation buttons. To change the colour simply change the colour of the shape in step one and change the colour of the stroke in step 4.