Making Stunning Buttons in Photoshop

Buttons are an important part of a design. Their main purpose is to call a user to action and get them to press it, to make an action happen on the page. Many sites out there simply leave buttons in forms and on pages to the default style and let the users operating system take care of making them look, well, boring. In this tutorial I will show you how to create stunning buttons that will draw attention and get some clicking going on.

First things first

Open a new document in Photoshop by pressing ctrl+n (cmnd+n in mac) or alternatively, click File > New in the upper toolbar. Set your page width to any size you like, in this case I'll use 400 pixels by 400 pixels and click OK. In the tools menu select the rounded rectangle tool and set the radius to 8px, choose any color you like because it will get covered when we apply a gradient later on.

Add a new layer on top of the background by pressing shift+ctrl+n (shift+cmd+n in mac) or clicking the new layer icon on the layers panel and name it "button". Click and drag the rounded rectangle tool until you have a shape of about 260 pixels or bigger.

Adding Layer Styles

Now I'm going to add a gradient by double clicking on the new layer I just created my rectangle on, and this will open the layer styles window. Make sure the gradient overlay box is checked and click on the gradient bar to open the gradient editor.

With the gradient editor open, click the stop to the left then the color panel that appears to the bottom and choose any color you like from the color picker, for this tutorial I'm using #660000. Click the right stop and choose your lighter color, I'm using #990000.

Now that we're done editing our gradient, click OK on the gradient editor but leave the layer styles window open because we're not quite done adding style to our button just yet.

With the gradient now applied to the button, we should have something that resembles the bright red example below.

With the layer styles box still open, click on the inner shadow box and apply the settings in in the screenshot below with the mode set to normal, color of #cc0000 and a distance of 1.

Now click the stroke box and apply the settings in the screenshot below with size of 1 and color of #660000.

For the last and final layer style that we are going to add to our button (this is optional), click on the inner glow box and apply the settings in the screenshot below with a color of #990000 and a size of 1. Go ahead and click OK on the layer styles window to save and apply the styles we just added.

As you can see from the thumbnail preview in the layer styles window, our button is starting to take on depth and character, but there's still much more work to be done to make it "stunning". Lets continue, shall we?

Adding a little extra emphasis

Add another new layer on top of the button layer and name it "shine". Hold ctrl and click on the thumbnail of the "button" layer to outline it, you should see an animated dashed outline around the inside of your button. Select the rectangular marquee tool by clicking it or pressing M on your keyboard, then hold alt while dragging over the bottom half of the button. The top half only should be selected.

Choose the gradient tool by clicking on it or pressing G on your keyboard and choose color #FFFFFF from the color picker. Make sure a liner gradient is selected from the top toolbar with a white to transparent gradient chosen. Click and drag from the bottom of the dashed line to about 3/4 of the way to the top of the button to add our shine gradient. From the layer panel adjust the opacity to about 5% or whatever your preference, then press ctrl+d to deselect the button.

The all important text

Now that we have the styling handled, it's time to add the all important text to entice that itchy mouse button click. Select the text tool and click somewhere in the center of the button and type your text. Once you are done typing, move the text to the center of the button, change the size to 36px and the color #FFFFFF.

Now to make the text stand out by adding layer styles to it. Double click on the blank area of the text layer and click stroke in the layer style panel, add 1px of stroke with a color of #990000. With the layer styles panel still open, click on outer glow and change the color to #660000 with a size of 5px. This gives the text an inset appearance on the button.

You can also play around with adding a drop shadow, I usually set it to 2px of distance with a size of 3px to make it appear to rise off the button instead of being inset.

You should now have a stunning button worthy of drawing attention. Try changing the settings to get some different effects. For instance, making the button seem more curved is as easy as applying a darker gradient color on the bottom and lighter on the top or changing the distance and the angle of the inner shadow.

I have also included the psd file I created for this tutorial for you to download. Feel free to share it and use it in any projects that you wish.