Web 2.0 Button Design

Web 2.0, THE popular style and standard for contemporary web design, utilizes the use of clean, bright colors, and gradients. A key visual indicator of Web 2.0 design is the use of large, 3D buttons that grab the user’s attention. Buttons can be used to promote a sale, contact, and/or have a slogan such as “Lose Weight!”, while at the same time, tempt the user into clicking and going where you want them to go. You know you couldn’t resist pressing the red button when your mom told you not to!

The impact of having a button is far greater than just having a link on your site. For example, if your site said “Contact Us” at the bottom within the content, the viewer would most likely have to read through the content until they get to the “Contact Us” to even know its there since its buried in text. But a button that clearly states “Contact Us” is more likely to visually attract their attention.

In this post, I’m going to go through how to make web 2.0 buttons that “pop”, even if you’re not that Photoshop savvy.

I just learned how to create web 2.0 buttons a couple months ago. It usually takes me a couple hours to get the right effect and gradient exactly the way I want it to look. Luckily, I stumbled upon an awesome resource for gradients and styles that made making buttons much easier than I could’ve imagined. I was searching around various blogs trying to find a post that was interesting and useful and found this BIG TIME TIME SAVER!!!

After downloading these photoshop styles/button templates, all you really need to do is minor tweaks, and your button is ready to go.

Here’s how:

1. First thing you have to do is download the zip file from dezinerfolio.com, who shared their styles on their blog.
2. After you download the zip file on this page, upload it into your Photoshop,
3. Open up a new Photoshop file and go to Window > Styles to bring “Styles” into your toolbox (shown below).

   
   Now that you have uploaded the style, you’re ready to create a web 2.0 button in little to no time!

4. Open a New Layer on your file and find a style you like best.
5. Once you’ve found a style you like, simply click on the style and the settings of that particular style will automatically be implemented onto the layer.
6. As you can see in the images below, the image on the left shows the styles in the toolbox and the one on the right shows how the styles effects automatically updated into the layer.

7. Next, choose a shape for your button; I like using the rounded rectangle tool for a button.
8. After you’ve chosen a button shape, click and drag the mouse to make the rectangle as big as you want. As you can see in the image below the color of the style/gradient I chose fills in the rectangle.

9. After you have the button, color, and style you want all that’s left is adding text and layer effects. Below I have an example of the button with text. I have put some layer effects on the text to make it pop out of the button.

10. After you have stylized the button how you want it, you can trim the white space around the button.

11. And there you have it, a button! That didn’t take long at all! 🙂