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.
February 25th, 2010 at 3:08 am
Wow! What an excellent tutorial! I’ve seen these buttons all over the place and tried to make them in illustrator with the different gradient tools. Using the blending options is so much easier!
I have just found your site through Dmoz (of all places) because I recently put mine up in the same category. I’m fairly new on the scene, but hope to build my site into one like yours, with blogs, free stuff etc.
Thanks again for this blog post, it’s the first one I’ve read and it’s great. I’ll definitely read through some more…
Like or Dislike:
1 
0
May 13th, 2010 at 5:15 pm
Hey, very nice tutorial. Did you try a Cool Button Designer? I think it is a best web button creator – if you dont have a photoshop or dont know how to use it. You can also apply the CSS to the graphics created in Cool Button Designer. I suggest you to try it, it has bunch of features, and creates a cool looking buttons. Just google for Cool Button Designer.
Chao.
Like or Dislike:
0 
0
July 5th, 2010 at 6:41 pm
Cool Tutorial… Nice Man Thanks for sharing…
Like or Dislike:
0 
0