Clean Photoshop Buttons

In this tutorial I’ll be showing you how to create clean Photoshop buttons. I like to style my buttons with layer styles as opposed to a series of layers. I prefer this because it allows me to re-size the buttons without having to modify lots of little layers.

Today, we’ll learn how to create this button:

The button we'll be creating

In order to achieve the effect above I’ll use the following layer styles:

Step 1 – Create a Background Shape with a Gradient

To start, create the background for the button with the Rounded Rectangle Tool and apply the gradient below. To apply styles to a layer just double click on the layer in the layers palette.

Create a simple background layer and add a subtle gradient

The gradient should be subtle. In my example I’m going from #dadada to #fdfdfd.

Step 2 – Add a Stroke

Your stroke should be strong enough to provide definition for the button but not so strong that it doesn’t flow with the gradient. It’s important to change the position of the stroke to “inside”.

In my example I started with a black stroke and turned down the opacity until it looked like I wanted it to.

Apply stroke to the button background

Step 3 – Add an Inner Shadow

This is one of my favorite tricks. Because you can only add one stroke to a layer, you have to get creative if you want to have multiple borders.

Here’s how you can create an inner border with the inner shadow option:

Setting the size to 2 gives you an inner border of 1 pixel. The other pixel is hidden under the stroke so you don’t see the whole effect. This is what we want.

Adjust the opacity to achieve your desired depth. For mine, I chose 42% opacity.

Apply inner shadow

Step 4 – Add an Inner Bevel

Now we’re going to add a slight bevel for additional dimension. I won’t go into detail but you can copy my settings below. Essentially this makes the bottom border of the button a bit darker than the top.

Apply inner bevel

Step 5 – Add the Label

Finally, lets add a label with a slight drop shadow. The drop shadow below is small and tight to get the desired affect. The text feels like it’s really part of the button, not separate or floating.

The font I’m using is Tertre Extra Bold 12pt (with sharp anti-aliasing). This font is free and you can find it here.

Add a label to the button with a slight text shadow

And that’s it!

Once again, I love this method because:

More Examples

Here are some more buttons you can make using this technique:

Clean Photoshop Buttons

The fonts I used for these buttons are:

Download the PSD

Click here to download a psd for the buttons above.

License: You are free to use these buttons for personal and commercial use. You are not allowed to distribute them on your own website or charge for them. Do not link to the PSD directly, but instead, link to this page.

Enjoy!