Create a simple Google style Web Button in Photoshop

I will show you how to make a simple and clean looking Google style web button. It's easy, well explained and customizable.

Create a new document and select Rounded Rectangle tool.

Press key D, do reset colours.

Then set Radious for selected tool to 12 px (see the picture).

Then draw the shape of button on your document.

Click above on Layer, Rasterize and choose Shape.

Click above on Layer, Layer Style and choose Gradient Overlay...

When new window with gradient modification appears, click on gradient to open more settings ...

Gradient Overlay opens.

Slick on first Color stop (see the picture) to select the first color.

In color selection window in field # enter e6e9e2 and click OK.

For the last colour stop (see the picture) leave the white (or set it) colour and click OK.

In Blending Options window now select the Stroke.

And set the Size 1 px and then colour for filling set # to b7b7b7 and click OK.

Select Horizontal Type Tool (shortcut is T key).

Then select Segoe UI font and choose random size of the writing.

Then set the foreground color # value to 7a7a7a.

With selected tool make a selection around the shape you have created it (see the picture).

Type and word on your button.

I have moved down the field to align the text on button.

Click on Commit any current edits when done.

You are finished.