.Net Magazine Feature. Stylish and Detailed Web Buttons

In the steps below, we’re going to walk you through the basics of creating a stylish and detailed web button for your site. What we want to create is a button with the attention to detail that some websites or designers miss. It’s these little touches that will finish the overall look of any site if done right.

The final file you will end up will not only look great but will give you a button sprite with a rollover state that you can then set up using some basic CSS techniques (CSS background sprite and CSS text image replacement).

The buttons actual colours and features aren’t important as you can create the button to fit any site you are designing. The tutorial acts as more of a guide to help you understand layer styles rather than creating multiple layers to create the same effects. You can apply these techniques to buttons with rounded edges or even to circular call to actions or to anything you feel fits the need for such styling.

START
Document For the sake of this tutorial we are creating a new Transparent Background Document that is 92px wide by 84px high. This will give room to accommodate both the on and off states of the button and any shadowing effects we create. You can create a document any size for the need of your buttons.

Turn the document Rulers on (Ctrl/Cmd +R) and drag a guide down from the X axis (horizontal) ruler to the 42px mark on the Y axis (vertical) ruler to define the two halves of the document. This determines the areas where we will create both the on and off states of the button.

2
Create Choose the Rectangular Marquee Tool (M) in the main tools palette and drag the shape over the top half of the document you just created to 90px wide by 40px high. You can check you are creating the right size by watching the width and height in the info pallette.

Fill this selection with whatever colour you have as this won’t matter (Ctrl/Cmd +D). Now double-click on the filled layer in the Layers Palette to access Layer Styles and choose Gradient Overlay.

3
Styling Click into Gradient to bring up the editor. For the sake of this tutorial change the left Color Stop to a burnt orange #e45d2c. For the right Color Stop, an orange #ec8350 and choose OK to apply these colours.

Still within your Layer Styles choose the Stroke effect. Set the Size to 1px and Position to Inside. Set the Fill Type to Gradient and again click into Gradient to bring up the editor. This will give us that attention to detail we were after rather than a flat colour for the stroke.

4
Styling Continued For the left Color Stop, use a dark orange #da2d26 and for the right Color Stop, use a lighter orange #e65d25. Once again choose OK to apply the colours.

Now choose the Inner Shadow effect and set Blend to Normal, Colour to white #ffffff, uncheck Global Light, Angle to 90, Opacity 50% and Distance only to 2px.

5
Shadowing Now choose the Drop Shadow effect and set Blend to Normal, Colour to Black #000000, Opacity 50%, uncheck Global Light, Angle to 120, Distance 1px and Size 2px. Choose OK to apply all the effects to the button. Success!

6
Text No to add the text. Select the Horizontal Type Tool (T) and for the purpose of this tutorail set the typeface to Arial, Bold, 18px, anti-aliasing Smooth and the colour to White #ffffff. Then type in the text you need to use for the button.

7
Text Shadowing Double-click on the text layer as you did before. Choose Drop Shadow. Set Blend to Normal, Colour dark orange #da2d26, Opacity 100%, uncheck Global Light, Angle -90, Distance only to 1px. Choose OK to apply the effect. Now you have both a styled button and added the final touch to your text.

FINISH
Final Touches To create the on state of the button we have simply selected both the layers in the Layers Palette and duplicated them. Then simply move the two layers together using the Move Tool (V) to the bottom half of the document so the top of your button aligns to the guide you created at the start of this tutorial.

You can now edit the layer styles to whatever you want, the most common method is to change the Colour Stops but in this case we have simply Reversed the Gradient Overlay for the on state. Have a play and see what you can achieve.

Download
If your having problems following this tutorial just download the original file here.