Step1: Setting up workspace and creating main button.
Create a new image 800x600, Change the background color to white. Press Alt+Ctrl+0 to view the actual pixel of your work area. Create a new layer, Layer > New > Layer... (Shift+Ctrl+N) and name it Button.
Using the Rounded Rectangle Tool
create a rectangle using the dimensions below. Change the foreground color to #484848
With that, you should have the effect below.
Now right click on the Button layer, click Blending Options and add the settings below.
Inner Glow
Gradient Overlay
Gradient
Stroke
Gradient
Before clicking ok, click on the New Style Button
to save the style then click ok to add the style when you are finished. With that your should have the effect below.
Step2: Creating the inner image on the button.
Create a new layer, Layer > New > Layer... (Shift+Ctrl+N) and name it Plate. Using the Rounded Rectangle Tool
create a rectangle using the dimensions below. Change the foreground color to #484848. Place the newly created rectangle over the previous button as shown below. I zoomed into it to get a better view.
Rounded rectangle dimensions
Now right click on the Plate layer, click Blending Options and add the settings below.
Inner Glow
Stroke
Click ok when you have added the setting. With that, you should have the effect below.
Zoomed in image.
Step3: Adding circles to the button.
Create a new layer, Layer > New > Layer... (Shift+Ctrl+N) and name it circle. Using the Rounded Rectangle Tool
create a rectangle using the dimensions below. Change the foreground color to #484848.
Create a circle by holding the shift key and position it as shown in the image below.
Now right click on the circle layer, click Blending Options and add the settings below.
Inner Glow
Stroke
Click ok, now you should have the effect below.
Duplicate the circle layer by pressing Ctrl+J and position it on the opposite side of the button to get the effect below.
To change the button color to match your site click. Place a Hue/Saturation layer on top of the button layers. By clicking on create new fill or adjustment layer, when you do that a menu will come up.
Click on Hue/Saturation and the window below will popup.
Play around with the Hue and Saturation, will get some nice effects.
Finished:
That is it, hope it came out to what you expected.












More Photoshop: