Design a Simple Yet Effective, Clean and Shining Button for Your Website in Photoshop

in this tutorial, I will show you the method I use to create a stylish, clean and shining button for your website in Photoshop. This method is extremely simple with no more than five steps, yet it’s very effective since you can use the button for a wide range of occasions.

Along the way, the tools we will be using include the shape tool, layer blending options, brush and eraser tool. This tutorial is suitable for beginners as the steps are quite easy to follow in my opinion. As for advance Photoshoppers, I would love to hear you the methods you use to achieve such effect, just drop me a comment below.

Have a try, let me know if you have any problem, I will try my best to help you out :)

Here is a preview of the final effect for this tutorial:

Ok let’s get started!

Step 1

Let’s create a new document sized 640 x 480px and fill the background layer with Black.
The reason I chose not to create a document with the size same as the button we’re creating, is because ultimately we will be placing this button somewhere on a web page. Therefore, I think it would be better if we start on a bigger canvas so we will have a better overview of the button design.
Now add a new layer on top of the background layer and name it “background lighting”, grab a big, soft and round brush with a dark grey colour, do a single-click in the position shown below:

Step 2

Grab the Round Rectangular Tool (U) and apply the settings to it:

Draw a rectangular shape in the centre of the canvas, as shown below: (Don’t worry too much about the dimension, just a rectangular shape will do)

On this shape layer, apply the following layer blending options:
Drop Shadow

Inner Shadow

Gradient Overlay

and you will have the following effect:

Step 3

Now let’s load the selection of the shape layer by holding down the Ctrl key and left-click the thumbnail image of the shape layer on the layer palette.
Create a new layer called “Lighting”, on this layer, grab a soft round brush with white colour, do a single click in the position as shown below:

and you will have the following effect:

On this “lighting” layer, apply the following layer blending options:
Drop Shadow

Bevel and Emboss

Gradient Overlay

and you will have the following effect:

Optionally, you can duplicate this “lighting” layer once for more depth. You will notice on the top we created a shining edge line, which add a bit of extra flavour to the button design.

Step 4

Duplicate the “lighting” layer one more time and put this layer on top of all other layers. On this duplicated layer, go to Edit > Transform > Flip Vertical and flip this layer vertically once.
You will now see on the bottom we now have a shining edge line as well, this makes the button more stylish.

In order to reveal the top shining edge line created in the previous step, we can simple grab an eraser tool with a soft round brush, and do a single click on the position shown below:

and you will now have this effect:

Step 5

Now we can simply type some text onto the button. Font choice is quite important here because we want to the button to be as eye-catching as possible. Personally I think those Bold, Clean Font always work wonders. There is a pretty nice article here containing a list of bold fonts free for download, simply grab one of those and type some text onto it:

And on this text layer, apply the following layer blending options:
Drop Shadow

Bevel and Emboss

Gradient Overlay

And you will have the following effect:

To make the text stronger, simply duplicate the text layer once and you have made a very stylish, clean and shining button:

That’s it for this tutorial! Hope you enjoy it drop me a comment if you have any question, I will try my best to help you out.
Cheers and have a nice day!