Home » Tutorials

Create a Stylish Web 2.0 Button in Photoshop

26 July 2008 7,954 views 2 Comments

Web 2.0 style is incredibly popular these days; the clean, gradiented, and glassy look that signifies this style exudes professionalism. Follow the simple steps outlined in this tutorial to create your very own Web 2.0 Button in Photoshop.

Check out the final product -

Step 1

Create a new document with the dimensions 500×500 px. Fill the background layer with a gradient going from dark gray to black. I used the colors (#2d2d2d) and  (#000000).

Step 2

Use the Rounded Rectangle tool to create a 300×100 px rectangle in the middle of the image. Round the corners to fit your preference using the “Radius” setting.

Step 3

Next, we are going to style the button using Photoshop’s powerful layer styles. For the Inner Glow, use the color (#70ae0e); for the gradient – use (#7dbe0a) to (#a2d93f); finally, for the stroke use the color (#5b9400).

After you have applied these layer style changes, you should have something that looks like this:

Step 4

Now it is time to add some text to your button. Choose a font you like, I’ve chosen a bolder font as it will show up better after we apply the following layer styles. Make sure to change the layer’s blend mode to Color Dodge.

You will now have something like this:

Step 5

Next, we will create a reflection. To do this, duplicate the button and text layers and drag them just below the button. Merge the two layers and use the ( Edit – Transform – Flip Vertical ) to flip the layer over. Next, set the layer’s opacity to 40% and use a large eraser brush with a “Hardness” of 0% to erase the bottom part of the reflection layer. You should end up with something that looks like this:

Congrats! You have created a stylish looking, web 2.0 button. Experiment by tweaking the techniques demonstrated in this tutorial to create your own great effects.

You might also like:

1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading ... Loading ...


  • Vlad said:

    Thanks…. I really like the green gradient look!

  • Orlando Design said:

    Just what I was looking for. I have a client who needed some horizontal buttons, and this is exactly what I needed to get started.


Leave your response!

Add your comment below, or trackback from your own site. You can also subscribe to these comments via RSS.

Be nice. Keep it clean. Stay on topic. No spam.

You can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

This is a Gravatar-enabled weblog. To get your own globally-recognized-avatar, please register at Gravatar.