How to Create Sleek Button Design in Photoshop

Today we are going to create a sleek button design in Photoshop; this is very useful on websites that has call to action. We will use bright colors and dark background to add the effect. Bright button colors attracts attention to the readers, that’s why it is best to use on call to action buttons. This is best for membership sites and E-commerce websites that the user need to sign up or buy a product.

You can download the PSD at the bottom of this tutorial!

Here is the end result of our tutorial.

We will only use basic Photoshop techniques, if you have other alternatives feel free to add them in the comments below.

Let’s start

Open you’re good friend Photoshop, and create a canvas 450px by 300px.

We will add some gradient to our canvas, right click on the canvas layer and select blending options > gradients and follow the settings. I used # f5f4f4 and # b3b3b3 as foreground and background color.

Select your rounded rectangle tool (U) and set the radius to 50px, draw the shape at the center of the canvas.

Now, select blending options and follow the settings above, I only used white on drop shadow color #ffffff.

Now select the inner shadow, follow the settings. I used Black #000000 for the color and set it to multiply.

Now for Inner Glow, this will add and effect to our design. I used # fcfcfc as base color, and set the size to 1.

For the Gradient, use # dddddd as foreground and # c4c4c4 as background color. Set it the angle to 90 and click ok.

This is what you should have, clean and detailed background. We are not done yet, we will create another smaller rounded shape like this one.

Grab the Rounded Rectangle Tool (U) and 50px for radius.

Select Blending options, on Drop Shadow follow the settings above. I used Black for the color #000000 and size, distance to 1.

For Inner Shadow, set the background color to white #ffffff, and distance to 1.

Inner Shadow set the background color to #fcfcfc and size to 1.

For the Gradient part, I used # e7a904 as foreground color and # fddb3b as background color. And set the angle to 90.

We have something like this above, now to finish things up we will add some text.

We added some text, and set the color to white #fffff. We will add Inner shadow to add an effect.

Select Blending Options > Inner shadow and set the background color to # ca9707 and set the distance to 1.

This is the end result, pretty sleek isn’t? Bright colors always attract attention, that’s why they are useful on call to action button like this one. I hope you enjoy my tutorial as much as I did.

If you have other button ideas, why not post the link in the comments below. I would love to see what you’ve got.