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!