How to Make a Modern UI Web Button Using Photoshop

Dec 24 2010 by Jacob Gube | 7 Comments

How to Make a Modern UI Web Button Using Photoshop

This step-by-step design tutorial on Design Instruct (our other website) will show you how to create a slick web button in Photoshop, and also how to make it functional using HTML and CSS.

Final Result

Click the preview image below to go to the tutorial on Design Instruct.

Related Content

About the Author

Jacob Gube is the Founder and Chief Editor of Six Revisions. He’s also a web developer/designer who specializes in front-end development (JavaScript, HTML, CSS) and also a book author. If you’d like to connect with him, head on over to the contact page and follow him on Twitter: @sixrevisions.



February 2nd, 2011

This is a great article if you have a photoshop.I have found Cool Button Designer and I must say that I’m not disappointed.
Cool Button Designer is a small but powerful application that can create professional looking buttons in just a few seconds.You can choose from a large library with pre-made builds and shapes or you can even create your own.Result kind of the same as it was done in Photoshop like this one.Also,you can add icon to a button.
I encouraged you to try it. Google for it.


February 19th, 2011

Thanks! This is just what I been searching for!

Katharine J. Tobal

March 24th, 2011

nice tut … thanx Jacob!


May 6th, 2011



July 15th, 2011

I love this button!
So smoooooth…


August 17th, 2011

Cool post! Thanks for sharing.


September 30th, 2011

Thanks for the tutorial.

Cool Web 2.0 button. Im sure it will lift my whole layout.

Leave a Comment

Subscribe to the comments on this article.