Web 2.0 Button

Create a unique web 2.0 inspired button. These buttons can be used for navbars as well as buttons throughout a website. In this tutorial I will show you how to create a unique web 2.0 button. Remember that the colors that are provided in this tutorial are just for this example, you can try a lot of diiferent colors/gradients etc and get some very unique styles.

• First of you want to create a new document (any size will do, in this example I used 164 x 50)

• Create a rounded rectangle of the color of your choice this will be the main button color. In this example I am using black which is #000000 - Set the radius to 5px on the top toolbar

• Apply the following styles

• Create another rounded rectangle, with the same radius (5px). This one will be the reflection, so it is going to be smaller and positioned at the top. I used #DEDEDE for the color of this shape.

• Next click the “Add to vector mask” button on the bottom of the layers palette.

• Press the letter D and then X this will set the forground to white and the background to black. With the Gradient Tool drag a line from the top of the small rectangle to the bottom of it, you should see something that looks like this.

• We are going to now add some text between the layer you just created and the base layer (the one we added some styling to) In this example I am using Helvetica – Medium Condensed – 14pt – Sharp We are going to be using two colors in this tutorial White (#FFFFFF) and a nice Green (#DCF414). Put the text on the right side of the button so that we can put a small image on the left side.

• Next we are going to add a small image to the left side. For this I am going to use the check mark shape that comes standard with Photoshop.