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

First Shape

  • Apply the following styles Style

  • 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.

Add Text

  • 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.

Add Shape