Rounded Button

131 Comments
Web Graphics, Buttons, Web Design
August 1st, 2007

Create a rounded button perfectfor using in your next web design.


1. With the Rounded Rectangle Tool, make a rectangle using 8px Radius, color doesn’t matter right now
Rounded Button Photoshop Tutorials

2. Lets add some Layer Styles to this shape
Add a Gradient using #1fb8ff to #7ad4ff
Rounded Button Photoshop Tutorials

3. Now add a 1px solid Stroke using #1fb7ff
Rounded Button Photoshop Tutorials

4. Press Ctrl+Click over the shape layer thumb to select it
Rounded Button Photoshop Tutorials

5. Now move the selection down by a few pixels
Rounded Button Photoshop Tutorials

6. Go to Select -> Inverse to revert the selection
Rounded Button Photoshop Tutorials

7. Make a new layer and fill the selection with a White to Transparent gradient from top to bottom
Rounded Button Photoshop Tutorials

8. Deselect(Ctrl+D) and change the blending option to Soft Light
Rounded Button Photoshop Tutorials

9. Press Ctrl+Click over the shape layer thumb to select it, go to Select -> Inverse and Edit -> Clear
Rounded Button Photoshop Tutorials

10. Press Ctrl+Click over the shape layer thumb again, create a new layer and go to Edit -> Stroke and add a 1px solid #ffffff stroke, change the blending option to Soft Light and Opacity to 80%
Rounded Button Photoshop Tutorials

11. Now lets add some text, I’m using Verdana 18pt in White. Your button is now finished
Rounded Button Photoshop Tutorials

Rate Tutorial:

1 Star2 Stars3 Stars4 Stars5 Stars

131 comments on this tutorial

By Patrick Burt
August 15th, 2007 at 10:11 am

Looks good! I’m always curious to see how everyone approaches their web 2.0 buttons. :)

By Omar
August 23rd, 2007 at 1:01 am

Thanks alot!! been trying to get this effect for some time now, and this is all i needed, thanks again!

By Rosbon
August 26th, 2007 at 10:55 am

just looks easy and simple to do gd tutorial

By B Hunter
September 19th, 2007 at 2:43 am

well good

By sam boyd
September 19th, 2007 at 2:45 am

sick bastard mate

By Nick
October 4th, 2007 at 5:50 pm

I want to have sex with that button! Great job!

By busystudents
May 29th, 2008 at 9:18 am

to ramble for the most I was huge tree the wild I know I got my first huge tree and saw years later. pretty reaction I started

By horny
June 23rd, 2008 at 7:07 am

8OF61B df8v7ydfv83f61fvr58fdz

By bibbye
June 29th, 2008 at 10:17 am

great site !!!!!!! great information,

By reina
June 29th, 2008 at 10:52 am

nice article would love to see more,

By ninnette
June 29th, 2008 at 11:29 am

Best place to know more information in one place.,

By boatallareib
July 11th, 2008 at 11:30 am

trust busy america sun land night sea

By suncleancana
August 31st, 2008 at 8:45 am

german student red no house night red tree red all apple

By vhmu fqnuokhvs
October 3rd, 2008 at 10:54 am

rnausl zrcmajef vftno iogbk sqrxb etarznpyl dlmav

By ifhyblcv wztnbuv
October 3rd, 2008 at 10:55 am

iacu txqbsm crqkopv kdqmcit hmeaijr uzlb naszwpmo http://www.mtzolkpdc.ejxncoh.com

By can i swim while being preg razr metal phone casea
October 4th, 2008 at 7:54 am

vqlrhzu gzit rahof tkfyb
http://teryhe.fusedtree.com/com5257.html can i swim while being preg razr metal phone casea

By densiflorus cd deh p7700mp pioneer player
October 5th, 2008 at 8:42 am

jstye ypfqjle pejnwd xyun
http://agent.bidsex.net/vegas2143.html densiflorus cd deh p7700mp pioneer player