How to Create Sleek Button Design in Photoshop

P On 9 Nov, 2011 • + By 9 With 9 Comments

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.

How to Create Sleek Button Design in Photoshop - Sanjay khemlani [tweegi-button name="sleek-button"]

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

Let’s start

How to Create Sleek Button Design in Photoshop - Sanjay khemlani

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

How to Create Sleek Button Design in Photoshop - Sanjay khemlani

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.

How to Create Sleek Button Design in Photoshop - Sanjay khemlani

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

How to Create Sleek Button Design in Photoshop - Sanjay khemlani

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

How to Create Sleek Button Design in Photoshop - Sanjay khemlani

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

How to Create Sleek Button Design in Photoshop - Sanjay khemlani

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

How to Create Sleek Button Design in Photoshop - Sanjay khemlani

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

How to Create Sleek Button Design in Photoshop - Sanjay khemlani

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.

How to Create Sleek Button Design in Photoshop - Sanjay khemlani

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

How to Create Sleek Button Design in Photoshop - Sanjay khemlani

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

How to Create Sleek Button Design in Photoshop - Sanjay khemlani

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

How to Create Sleek Button Design in Photoshop - Sanjay khemlani

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

How to Create Sleek Button Design in Photoshop - Sanjay khemlani

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

How to Create Sleek Button Design in Photoshop - Sanjay khemlani

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

How to Create Sleek Button Design in Photoshop - Sanjay khemlani

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

How to Create Sleek Button Design in Photoshop - Sanjay khemlani

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

How to Create Sleek Button Design in Photoshop - Sanjay khemlani

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.

C Tags: , , ,


Show some love and share!


is a Web & Graphic Designer from Philippines, he is passionate about Wordpress, Responsive Design and Open Source. He is helping small to medium size business to market their products, you can contact him here.
50% of Hosting for your Website at GoDaddy.com!

9 Responses to “How to Create Sleek Button Design in Photoshop”

  1. Nick says:

    ahehe nice2 po 2,.ahehe gnun lng pla gumawa ng mga designs n gani2,.hirap tlga pg beginner p lng s photoshop,.ahehe laki ng 2long ni2,.tnx po ^_^

    • Sanjay says:

      Hey Nick,

      Glad you found it useful! You can check out other post that I made, I’m sure you’ll like it.

      Another thing, I would be happy if you’ll say it next time in English :)
      Enjoy.

  2. Rodrigo says:

    Sanjay! Thanks for the tutorial, really helpful!! I feel like I’ve learned something today :)

  3. radouan says:

    my text get under the rounded rectangle tool!!! what did i wrong?

    thx

    • Sanjay says:

      Hey Radouan,

      Maybe you clicked the rounded rectangle tool path while inserting your text. Try creating your text at the bottom and drag it once your done. Hope that helps :)

  4. raghu says:

    good tutorial.i created button myself reading the tutorial.post some more tutorials so that we can learn and develop our skills.

  5. vinyl sticker printing says:

    Helpful tutorial, I really was looking for such kind of tutorial because I’m going to start designing a site soon.

Leave a Reply

  • (will not be published)