Clean Website Buttons

This is the finished product from this tutorial, a beautiful button to use on your designs.

I am going to show step by step how to do it.

First, make a selection and fill it with any color.

Now, right click on the layer and go to Blending Options. Apply these styles:

Let's add a shape to make the button more interesting. Go to the custom shape tool (U), and select a shape you like.

Create a new layer to use the shape, then ctrl+click on the layer(to get the selection), create another one and fill the selection with #EFF1F8.

Then apply these styles on the blending options of the shape layer:

What about adding some text now. I added using Blue Highway font and color #CFCFCF

Your menu is looking like this now:

It's still looking boring. So let's add that left colorful part.

Below the Shape layer, create a selection and fill it with any color.

Then change this layer settings to Overlay. (On the layers tab)

Now right click on the first layer you create (the body of the button) and go to Copy Layer Style. Right click now on the left-blue part layer you just created and click Paste Layer Style.

Go to the blending options of the left part layer and make only two changes. Turn off the "drop shadow" style and add a color overlay of this settings (the color is #493C80):

Your button is looking like this now:

Now you can simply duplicate all the layers (helping put them on a layer-folder and duplicating it) to make your menu.

This is a picture of it implemented to a design:

Looks very nice!

I hope that you enjoyed the tutorial. Thanks.