Design a Beautifully Detailed Web Button

Today we’re going back to basics with a simple, elegant, and professional button tutorial from Liam McCabe. Liam creates all sorts of great web elements, so he’s going to be a great guide through the process. If you’ve been looking for a way to spice up your designs with a uniquely styled button or UI element, look no further…

In this tutorial I will be showing you how to design a detailed button using Photoshop. Various useful techniques are used to achieve the pixel perfect design, and it’s a fairly simple process taking no more than 15-20 minutes. The end result can be seen below. Like it? Then let’s get started!

Step 1: Getting Started

First thing you want to do is open up photoshop. Ctrl + N to bring up the new canvas window. The width and height is entirely up to you but make sure the resolution is at least 72 and the color mode is RGB 8 bit. Oh and set the Background contents to transparent. So something like this:

Step 2: Fill

Now fill the current layer by pressing Shift + F5 to bring up the fill window and from the drop down menu, select Color… and copy the hex value 141d28 into the box next to the # sign. This should fill the layer with a nice dark blue color.

Step 3: Alignment

Now when it comes to designing almost anything, it’s always a good idea to use guides to makes sure everything is nicely aligned. To add a guide slap bang down the middle of the canvas, from the top menu select view -> new guide, then select vertical and input half of whatever your width maybe, for me it’s 250px.

Step 4: Rounded Corners

Next you want to select the rounded rectangle tool (from the panel on the left) and draw a nice rectangular shape in the middle of the canvas, like so:

I set the background color of the rounded rectangle to a slightly brighter blue, hex value: 17202b. To do this you can either set the foreground color before you draw the rectangle or double click the layer thumbnail color after you’ve drawn the rectangle.

Step 5a: Layer Styling

With the basic shape drawn we are going to add some layer styling. To add styling to a layer simply double click the shape layer and a layer style window will appear. The first style to add is a drop shadow. By using a shadow with the spread value set to 100 we can give the button a 3d feel to it.

(For the following layer styles, feel free to play around with the values and use mine as guidelines)

Next style to add is an inner shadow, this will give the button even more 3d feel by adding a shine to the top of the button.

An outer glow simply closes up the top, encompassing the button.

By adding a gradient overlay we can simulate a curved surface, suggesting the shape is more of a pressable object like a button.

The final layer style is a stroke. This gives the whole shape a nice border and gives a bit more definition between the bottom of the shape and the drop shadow.

Step 5b: Gradient Border

Okay that’s the layer styling out of the way. It’s always worth spending time experimenting with the various styles, as you can achieve some very nice effects. If we take a look at our button we can see the very bottom (bottom of the drop shadow) lacks definition and is therefore a slight blur. To fix this we’ll add a nice gradient border.

The first thing to do is to set the foreground color to something around #050607. Create a new layer (ctrl + shift +n) and then hold ctrl and click the shape thumbnail. This is how you select the contents of a layer.

Done correctly and you should have a dashed line around your rounded rectangle. Now press G to select the gradient tool and drag from the middle just below the shape outwards like so:

With the shape still selected, switch back to the marquee tool by pressing M and then press up once, and then delete. Now press V which will allow you to move you newly created gradient border and position it at the bottom of the drop shadow like so:

Step 7: Further Detail

To add further detail to the button, duplicate our gradient border layer, position just above the bottom of the shape, invert by pressing ctrl + I and set the blending option to overlay. You may want to duplicate that layer also, just to brighten it up a bit.

Step 8: Radial Gradient

Now to add a radial gradient to the top of the button. Like before hold ctrl and click the layer to select the shape. Select the gradient tool (G) and set the foreground color to white. A good tip is to press D which sets the foreground color to black and the background color to white and then X to reverse the colors.

Above the selection drag from the middle outwards much like before, to get the following result:

Press ctrl + D to deselect and then set the layer to overlay.

Step 9: Text

Add some text, I chose Arial bold, size 14 smooth and add a slight drop shadow and there you have it! A wonderfully detailed button. Further detail can be added to the drop shadow section (looks a bit plain) and you can also begin to imagine how you could code this up in css with the various states to play with.

Finished!

And that’s it! I hope you enjoyed this tutorial and have fun creating some beautifully detailed buttons :)