There are a lot of different styles of buttons out there and we all get attracted to a particular style. The style I used in this tutorial is one of my favorites and I’m hoping you can add your own unique twist or flare to it. Seek the bottom of this tutorial for the source files.

The Final Product

Step 1

Create a new document with 72DPI. Using your Rounded Rectangle Tool (U) create a shape the size of the button you want to create. In this example my rectangle is 100pxW by 36pxH with a corner radius of 5px.

Step 2

Change the color of your new rounded rectangle to what we will call a “base color”. Remember the hex code you used for your base color as we will need it later. In my example, the base color of my shape is #00afe1.

Step 3

Create a new layer above your shape. Select the outline of the shape by using CMD + Click on the layer (PC users should replace CMD with Ctrl). Go to “Select > Modify > Contract” and contract your selection by 1px.

Set a color, lighter than your base color, to the foreground on your palette. With your new layer selected, and a contracted selection of your shape active, use the Color -> Transparency Gradient Tool (G) to give your button a 3D look, such as the one below. The color I used for my gradient was #31d1ff. (I change the opacity of gradient to 50% to make it somewhat weaker.)

Step 4

Using the same select and contract method we used above to set our selection 1px inside that of the shape: on a new layer do a White (#ffffff) Gradient -> Transparency. With the selection still active, go to “Select > Modify > Contract”. Once your selection is contracted again, use Delete to clear the contents of the selection. Change the new layer’s opacity to 50%. You should have a similar affect to this:

Step 5

Using the original select and contract method: create a new layer and using the Radial Gradient tool and White (#ffffff) give your button some added flare.

Step 6

Change the opacity of the radial gradient layer to 50% and then add some text — I used all caps, Arial 14px Bold. Right click your text layer and select “Blending Options”. Set your Drop Shadow settings similar to these:

• Blend Mode: Multiply
• Color: The same as your “base color” from Step 2. (Mine is #00afe1.)
• Opacity: 52%
• Angle: -90
• Distance: 1px
• Spread: 0%
• Size: 0px

You should have a final product looking similar to this:

Source Files

For those who like to use the original files for reference, you can download them here.

Questions, comments, or suggestions? Want to share your results from this tutorial? Use the comments below!