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.


















April 2nd, 2008
nice
April 3rd, 2008
Cool! it’s a big idea for the new aplications. Maybe will use that on my own site
=D
April 3rd, 2008
awesome button.
I’ve tried to make it but i can’t get my button to look the same when i’m at the gradient step. What are your setting for your gradient? I’ve tried playing around with it but i always end up with too much white at the top.
April 14th, 2008
Good lesson! Thanks
May 22nd, 2008
nice button dood!
July 6th, 2008
I have been looking for a well explained professional button tutorial for almost 3 months. Congratulations on a fantastic article. Many thanks; you saved my sanity…
July 31st, 2008
Very nice work
September 5th, 2008
Where can I find the check mark shape?
September 19th, 2008
Hey, just came across your site from a Google search, and from one web designer to another…it looks good! Color scheme, attention to detail, etc. Keep up the good work.