Step 1

Create blank canvas at about 500px (width) x 400px (height) to start off the button design. Create a new layer call ‘bg1‘. Select the Rounded Rectangular Tool, hold SHIFT and draw a round sided square in the center. Any color is fine at the current stage.

Step 2

Open blendin Options for ‘bg1‘ and apply the following styles:

Drop Shadow

Gradiant Overlay

Once you get all your settings, select the gradient tool and drag and drop to apple your gradient overlay.

Step 3

Hold CTRL, left click on ‘bg1‘ Layer Thumbnail to select its shape. Go Select -> Modify -> Contract and enter the value ‘2px‘. This will shrink the selected area by 2 pixel.

Step 4

Create a new layer call ‘bg2‘ and filled the highlighted (after shrink) area with any color. I use #000000 black here. Double click on ‘bg2′ to launch up the Blending Option and apply the following style.

Gradiant Overlay

• first color , #0ec600
• second color, #21c600

Now uses the type tool and type the letter you want. mine " m"

• Rounded Arial Bold
• 150pt

Same, after deciding your text, double click on ‘txt’ to launch the Blending Options and tweak the following styles.

Drop Shadow

Inner Shadow

Bevel Emboss

Gradiant Overlay

• first color #d2d2d2
• second color #f0efef

Step 5

Let’s give it a little glow over the top part. Hold CTRL, left click ‘bg2‘ Layer Thumbnail to highlight the outer shape; choose Eclipse Marquee Tool. Now hold ALT, with Eclipse Marquee Tool selected, drag is across to minus out bottom half of the highlighted area.

Step 6

With the top portion highlighted and Eclipse Marquee Tool still selected, right click and choose Feather; enter 15px for the radius.

Step 7

Create a new layer, call it ‘glow‘ and fill the highlighted part with white [#ffffff]. This should add glow effect to the top part of your button

.