Here’s a quick tutorial to give your buttons some pizazz. Having a sleek button can improve the click-age of your buttons, which is always good. Great for sign up, upload, buy now, or more info buttons.

First start out by making a new Photoshop document, or just apply this style to your current buttons. Create a rounded box (I used 7px edges) and add some text into it, preferably white text.

Then you’ll need to apply a inner shadow, gradient overlay, and a stroke. Here are the settings I used for each, it’s important to pick similar colors for 2 ends in the gradient.

Using a white inner shadow creates the nice glow effect while the stroke makes it visible. Doing these effect should give you a button looking like this.

Then modify the text, adding a light shadow (I used a 25% shadow with 1 distance and 3 size) and a gradient that’s white with some grey on the bottom.

Modifying the colors, font, gradients, and opacity of all the elements can give you many effect, here are some I tried.

Inspiration for this style of button was from 37signals’ Basecamp page.

Written by Andy Feliciotti

Andy Feliciotti is a Web Designer out of College Park, Maryland. He diggs web design and social media, if it's on the internet he has probably seen it. You can check out what Andy finds daily on his twitter.

One Response to “How to Make a Sleek Button in Photoshop”

1. 

   Mr Amateur on December 26th, 2009 at 12:23 pm

   Hi ,
   Your tutorial was useful for me, I’m newbie.

   Thanks

Leave a Comment