Tech Style Web Buttons

Step 1

Open an existing document of any size, or create a new one. I will be using a document that is 120x36 for this tutorial.

Set your foreground color to white (#FFFFFF) and use the flood fill tool (paint bucket) to fill the background with white.

Step 2

Create a new layer by pressing Ctrl + Shift + N and get out the rounded rectangle tool

Set the radius to 5 pixels

Create a Rectangle similar to the image below :

Step 3

Double click this layer, and apply the following blending options:

Inner Shadow:

Bevel And Emboss:

Color Overlay:

You can use #d8ff00 or your own color choice whatever is appropriate.

Stroke:

Step 4

Create a new layer by pressing Ctrl + Shift + N on your keyboard and get out the single column marquee tool

Step 5

Create a selection a place similar to the one pictured below:

Fill the selection with white (#FFFFFF) using the flood fill paint bucket.

Now tap the right arrow on your keyboard and fill the selection with black. (#000000) flood fill paint bucket.

Tip:You may need to zoom in to accomplish the flood fill, to zoom in hold down the Ctrl key on your keyboard and press the + key on your keyboard to zoom in closely.

Step 6

Press Ctrl + D on your keyboard to de-select the selection

Drop the opacity of this layer down to 47 percent:

Step 7

Hold the Ctrl key on your keyboard and click once on layer 2 (the rectangular layer), this should make a selection of everything in that layer.

Now selection layer three and click on the layer mask icon:

Step 8

Select the elliptical marquee tool and make a small circle on a new layer, it should be a similar size to the one in the image below.

Tip:Holding down the Shift key while making your selection will ensure the circle is perfectly formed

Step 9

Fill the selection with #474747 using the flood fill paint bucket tool.

Double click this layer, and apply the following blending options:

Inner Shadow:

Bevel And Emboss:

Stroke:

Step 10

Zoom in a bit by holding down the Ctrl key and tapping the + button a few times, (to about 600 percent).

Duplicate the circle by pressing Ctrl + J on your keyboard.

Press 'V' on your keyboard to get out the move tool, and position the duplicate circle as I have done below:

Step 11

Repeat this process two more times until you have four circles evenly spaced apart as pictured here:

To Complete the tutorial add some text and any other effects you wish.

Here is the end result:

Thank you for reading this tutorial!