Used in the right place, these very shiny buttons can be persuasive call to action buttons – and are relatively simple to create.  Here’s how in a few easy steps:

This tutorial assumes you’re using Photoshop CS3+, the general method applies to all versions though.  The PSD file can be found at the bottom of the tutorial.

Step 1

Start document with any size, doesnt matter (I’m using 640×480 px).  Draw a basic circle using the shape > eclipse tool. Hold shift while dragging to ensure you get a perfect circle.  Colour at this point doesn’t matter.

Step 2

Now for the transformation using layer effects.  Right click on the circle in your layers panel and choose blending options.  Now fill in using the details below.

Gradient overlay: set to radial and choose whatever colours you like, one dark, and one lighter.  I’ve gone for dark blue (#0e94cb) and lighter blue: (#6fd5ff)

Stroke: same colour as your dark colour so for me it would be #0e94cb.  Set the stroke to 1 px and opacity to about 80%.

Outer glow: Set to the colour black with an opacity of 54% and blend set to normal, the rest are defaults.

Inner Glow: Set to the colour white, blend vivid light, opacity 30%, size 16 px, choke 0%

Optional drop shadow: set to colour black, opacity: 24% angle 120 degrees, then the rest are defaults.

Step 3

Should now be taking shape and looking pretty good.  The final finish gives it it’s shiny 3D look:

Duplicate your new circle (ctrl + J) and remove all blending effects, so it looked like it did originally.  You should now have a boring circle on top of your good looking circle.

Change the colour of the boring circle to white, and set its blending to lighter colour, with opacity to about 47%.  Holding shift, drag a corner inward so it’s smaller.  You’ll need to fiddle with the size till it looks right.  Then simply grab the eraser tool set it to about 150px with 0% hardness and erase the bottom quarter of the circle like the image below:

Step 4

Now you can add text or an icon under the top white circle, and you’re done!  If you need it to be resized, simply use a gradient from white to 0% opacity on the white overlay circle rather than erasing. Download the PSD here.

Download it here.  Demo coming soon!