Sleek Modern Web Button in Photoshop

Sleek Modern Web Button

Many struggle with the fine details in creating their web design. Today I aim to help you solve a little of that by showing you how to create a modern and clean-looking web button for use on your website.

The Finished Result

This is the button that you are going to be creating in this tutorial and how the end result will look.

Step 1: Creating the file

Start by creating a new file with the size 400×400 pixels at 72 ppi resolution. Make the background contents white. This file will give us a lot of space to work with, even though the button will be much smaller than this.

Step 2: Drawing the button base

Select the “Rounded Rectangle Tool” (U), grouped together with the Rectangle Tool, and set the radius to 10px and the color to a full black.

Also make sure that it is set to make a shape layer by having the first option button selected.

With these settings intact, drag out a shape at a nice button size (you can see the image above) somewhere in the frame. Remeber, the larger document is just to have some clean space around when working on the button.

Step 3: Adding Layer Styles

Bring up the Blendning Options by right clicking on the button layer and choosing blending options. With that up, apply first an inner shadow with the settings you can see in the image above (described below). This inner shadow will give us a nice light outline in the top left portions of the button.

Shadow with an overlay blend mode and a full white color (#ffffff), the opacity is set at 80% and the angle is at 120°. The distance has been decreased to 1px and choke incresed to 100%. Also note that the size has been reduced to 0px.

Once you have added the inner shadow, apply a Gradient overlay with normal blend mode and a linear gradient at 90° angle (scale 100%) that goes from a dark blue (#1c272f) to a ligher blue (#3d525f).

Finally for the style, apply a stroke which will make everything come together nicely. It is going to be a 1px solid stroke with the outside position set. Normal blend mode and 100% opacity. Make sure to fill it with a color and set it to a shade of the button color, in the case another shade of blue (#152b39).

With all the styles applied, this is how the button should look for you too, if you used the same colors as in this tutorial (although I recommend trying it out with your own).

Step 4: Adding Text

Finally, let’s add some text to finish off the button. I chose the lovely Helvetica with the Regular variant at 14pt for this button, even though you can definitely use smaller text at 12pt as well. The color in this case is almost white. To lower contrast just a tad, I went with just a slight, slight grey tint (#f8f8f8).

Make sure to think about the space around the text if you consider making the text much larger. It is important with breathing room so don’t attempt to go crazy.

Final Effect

With the text added, this is how the button will look in its final form factor, ready to be saved out and used on the web.

Tags: , , , , ,


Erik is the owner of online media company Bernskiold Media that runs tutorial website Bernskiold learning and he is a Web Designer, Photographer and Software-Trainer.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>