WEB 2.0 Style Buttons

17 February 2011

Step 1
Make a circular shape, filled with a nice, bright color:

Step 2
Apply the following layer-styles to this new shape (double-click on a layer in the layerview):

If you did this right you get something similar to this:

Step 3
Make a new layer above the shap you just made. Select the circle (CTRL+CLICK on the thumbnail in the layer with the circle, while you keep the new layer selected in the layerview) and fill this layer with white (ALT+BACKSPACE).

Step 4
Select a part of this white cirkle as shown on the next image. Do this with the circular selection tool. Delete the selected part of the white circle (DELETE). The result is as shown next.

Step 5
Apply an opacity of 33% on this layer:

All the previous will result in the next image:

Step 6
Choose a fancy WEB 2.0 style font (in this case Helvetic Rounded) and type a digit or a letter or something:

Step 7
Apply the following layerstyle to this character:

And finally all this results in the follwoing:

Copy the layers and change the color of the circle to vary the button:

You must have JavaScript enabled to use this form!

Leave a comment!

  1. Your mail is safe with me. It's only only used to display your Gravatar image!


  1. Gravatar

    Hendra Setiawan

    03 April 2012

    simple and helpful ..
    thanks for share...

  2. Gravatar


    12 December 2009

    Hey, very. very nice!

    Than you!

  3. Gravatar


    16 July 2008

    Yeah! super fresh! cool dude thanks heaps for showing me the light!

  4. Gravatar


    19 November 2007

    Very nice! Thank you very much for posting.

  5. Gravatar


    18 August 2007

    Yes. Very nice looking buttons. Thank you for posting this.