Let’s start by creating a new document within Photoshop, you can use any size you want but for this tutorial I will use 500px wide by 500px high.

Set your foreground colour to dark gray (#191919) and using your Rectangle or Paint Bucket Tool fill the document with the gray.

Now in the middle of the page we need to draw a black (#000000) rectangle which will pose as our button.

3

Now create a new layer but you will need to drag it below the layer with our button on it. Once completed set your foreground colour to #0090ff. Now grab your rectangle tool and draw a rectangle higher than the button but slightly smaller in width like I have in the following image:

Step 2: Improve the look

Now we need to add some Blending Options to the layer with the blue rectangle. To reach the Blending options we need to right click on the layer in the layers palette and select Blending Options from the menu that appears:

Once inside the Blending Options window click on Outer Glow from the left hand side menu and apply these settings:

Next click on Bevel and Emboss from the left hand side menu and enter the following settings:

Now click on Ok to save your changes.

Next click on your original layer from the layers palette, the one that contains the black button, and enter the Blending Options for that layer.
Once inside the Blending Options window click on Bevel and Emboss from the left hand side menu and enter the following settings:

And then click on Gradient Overlay from the left hand side menu and enter the following settings:

And then click on Ok to save your changes.

Well it was quick but that is all, you have no created an attractive and clean navigation button. Your final result should look like the following:

Via: Design a clean web button