Create Web 2.0 Style Buttons in Photoshop

Ever wonder on how to create a web 2.0 style buttons with such nice glowing effects? Today I’m gonna show you how to create one.

First, we’ll create a 100 by 40 pixel image. Open Photoshop (I use CS4) then File > New then specify the width to 100 px and 40px in height.

Step 1

Select Rectangular Marquee Tool on the toolbox or just press CTRL+A to select the entire work area.
Then, click Gradient tool on the toolbox. (Ctrl+G) or if it is not shown press press CTRL+G then Shift+G to show.

Pick your desired gradient color. I pick fading color blue.

Step 2

Create New Layer then again with the new layer slected press CTRL+A. Click again the Gradient on the toolbox then on the color pick the color white and on the other side of the gradient pick the color that match the color that you’ve chose earlier. Then click the Opacity Stop and on the Opacity ticker type 0 (zero) to make the color transparent. Then after you select, drag it into your newly created layer just shown below or you can adjust.

Gradient Window

Drag the Gradient

Deselect the layer by pressing CTRL+D on your keyboard.

Again, create new layer. Click on Rectangular Marquee tool and drag it into your image with a margin approximately 3px on left, top and right side just as shown below and do drag it up to the center of the actual height of your document.

New layer

Then select again your Gradient tool and drag it starting on top up to bottom without minding the height of your selected area.

Then you will have similar output just like the image below. Deselect again your selection.

The Output

Select the first layer of your document then click “add layer style” button on the layer window.

Effects Window

Click on the Stroke checkbox then on then 1px on the size, Position = Inside, Blend Mode = Color Dodge, then select the closest match color of your button. Click OK.

Now you have a nice glowing web 2.0 style button You can adjust this as long as you want. Enjoy!

The final output