If you're looking for a clean custom web design, then visit the incredible team over at Captain Marketing Thanks for visiting!

Step 1

First up create a new document – I’ve made sure that I have lots of room to work with so I chose 540 by 440 as my size.

Fill the background with a dark gradient or just a solid colour (Edit > Fill and use a colour like #262626) if you don’t know how.

Step 2

Create a new layer (Layer > New > Layer). Select the rounded rectangle tool and use the settings below.

Left click somewhere in the middle of your document.

Right click and left click “make selection”.

Now you should have a selection like this:

Step 3

Next up we are going to be filling our selection with a gradient. Select the gradient tool anduse these settings. You can get the green gradient by clicking that area and changing the left colour to #7ebe3e and the right to #a8da77 or by setting your foreground colour to #7ebe3e and your background colour to #a8da77 whatever suits you

Left click in the middle of the selection and drag to the bottom while holding the shift key (which keeps it straight) and release. Now you can deselect your selection (Ctrl + D).

Step 4

Now we are going to be adding an outside stroke to our button. The easiest way to do this is to go Layer > Layer Style > Stroke.

Step 5

On a new layer (Layer > New > Layer) make a selection of 3 by 40 pixels in the position shown below. The easiest way to do this is to select the rectangular marquee tool and use the fixed size setting with width set to 3 pixels and the height set to 40 pixels.

Fill (Edit > Fill) with white (#ffffff). And deselect (Ctrl + D if you’ve forgotten already). And with any luck your button should now be looking like this…

Step 6

Add a double arrow “»” (copy and paste it if you want) on a new text layer.

Step 7

Go Layer > Layer Style > Drop Shadow.

This should make it a little easier to read and stand out from the background a little bit – some depth.

Step 8

Add some text for your button like your website’s name or something like “Home” if it is going to be a link to the home page and you are complete.

Here is an orange version of the button. You can change the colour of the button by adding a different coloured gradient to the base layer (the first layer we created).

Step 1

Like usual we are going to start off with filling the background with a radial gradient from a light grey to a darker grey. Light grey: #3e3d3d. Dark grey: #151515.

Step 2

Create a new layer (Layer > New > Layer) and using the rounded rectangle tool make a fixed shape of 300 by 50 pixels in the middle of the document.

Right click the shape and click make selection.

Select the gradient tool and set the style to reflected gradient. Set the foreground colour to #1c3f47 and the background colour to #2a6976. Left click in the middle of the selection and drag to the bottom of the selection and release. This will provide us with the base of the button.

Step 3

Now we are going to be adding some layer styles to our button to make it vista styled.

Layer > Layer Styles > Outer Glow

Layer > Layer Styles > Inner Glow

Layer > Layer Styles > Gradient Overlay

Now your button should be looking like this.

Step 4

Now we are going to be adding a reflection to our button. On a new layer select the area of your base layer (ctrl + click layer) and fill the selection with white (#ffffff).

With the rectangular marquee tool selected move it down below the button.

Go Edit > Transform > Perspective and drag the bottom right box towards the right while holding down the shift key (this pulls the other side out too so it keeps it even).

Add a layer mask and add a gradient from white to black within the reflection – this will fade it out.

Set the blend mode of the layer to Soft Light and lower the opacity to 15%.

Step 5

Last of all we are going to be adding some text. Choose a nice crisp and clean font for this.

Step 1

Create a new document (File > New) 100 by 100 pixels and fill the background (Edit > Fill) with white.

Step 2

Make a new layer (Layer > New > Layer) and select the Elliptical Marquee Tool. Make a fixed sized selection of 75 by 75 pixels in the middle of the document and fill it with a linear gradient from #68ac00 to #036800.

Step 3

Now we are going to be applying some layer styles to the icon.

Layer > Layer Style > Outer Glow

Layer > Layer Style > Gradient Overlay

Layer > Layer Style > Stroke

Your icon should now be looking something like

Step 4

Next up we are going to be adding a shine layer so create a new layer and select the area of your icon. You can do this by going Ctrl + Click on the icon layer.

Go Select > Modify > Contract by 2 pixels.

Now select the Elliptical Marquee Tool (set the style to normal) and while holding down the Alt key subtract the bottom half of the selection like so…

…and release.

Step 5

Create a new layer if you have not already and select the gradient tool. Set your foreground colour to white and apply a gradient from white to transparent in your selection (go into the gradient editor by clicking on the gradient bar at the top left of the photoshop window and select foreground to transparent).

Now left click at the top just above the selection and drag down to just under the bottom of the selection like below. What this will do is not make it 100% white at the top of the selection to 0% at the bottom, it will be more gradual which is what we want.

With any luck your icon should be looking pretty shiny now

Step 6

Now we are just going to be putting whatever we want on the top for the button’s purpose.. it could be an arrow or whatever so I have just chucked one of the default photoshop arrows in using the custom shape tool

Fill (remember from the start? Edit > Fill ) the selection with white.

Step 7

Add an outer glow to your arrow by going Layer > Layer Style > Outer Glow.

And you’re finished!