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.

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.