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
2. Lets add some Layer Styles to this shape
Add a Gradient using #1fb8ff to #7ad4ff
3. Now add a 1px solid Stroke using #1fb7ff
4. Press Ctrl+Click over the shape layer thumb to select it
5. Now move the selection down by a few pixels
6. Go to Select -> Inverse to revert the selection
7. Make a new layer and fill the selection with a White to Transparent gradient from top to bottom
8. Deselect(Ctrl+D) and change the blending option to Soft Light
9. Press Ctrl+Click over the shape layer thumb to select it, go to Select -> Inverse and Edit -> Clear
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%
11. Now lets add some text, I’m using Verdana 18pt in White. Your button is now finished
Rate Tutorial:
10 comments on this tutorial
cool….!!!
Thanks alot!! been trying to get this effect for some time now, and this is all i needed, thanks again!
just looks easy and simple to do gd tutorial
well good
sick bastard mate
Looks good!
I want to have sex with that button! Great job!
[…] Rounded Button […]
[…] about the rollover too. You could try this kinda thing… Web 2.0 style buttons | IRIS Design Rounded Button | Pscloud And here’s a good tutorial on how to make the rollover using just CSS… Making CSS Rollover […]
Looks good! I’m always curious to see how everyone approaches their web 2.0 buttons.