Just felt like making yet another web 2.0 button, and as I have said before, what I think characterize a web 2.0 button, and not any other button styles is smooth corners, gradients and some glossiness and reflection.

This is how it's going to look like when it's finished, and at the bottom you can download the Photoshop work file if you want.

First of, use the rounded rectangle tool to drag out the main shape, in the layers menu right click the shape layer and choose rasterize layer.

Now double click the layer to get to the layers styles menu and give it the following settings.

Now write some text in a new text layer, as I did and place it inside the button, also if you want you can draw or find a shape and place there.

Now for some glossiness, make a new layer, hold down ctrl and click the shape layer to load the selection, then with the selection tool, drag and intersect with the first selection the top part, as shown above.

Make a gradient going from white to transparent and drag it within the selection, so it looks like in the image below.

The last thing we need now, is a reflection underneath, so copy the shape layer we made at first, and then drag it down beneath the button.

Load the selection and with the gradient from white to transparent drag in the selection so it looks like in the image below.

And you are done.

Download the Orange web 2.0 button Photoshop file here.

discuss this topic to forum