How to make really nice buttons

Introduction

Creating buttons is something every web designer deals with, usually on a very regular basis. It can be one of those tasks that becomes tedious and repetitive but with a few tricks you can make pleasing looking buttons that also give the visitor useful feedback and navigational consistency. In this article I’ll be talking about buttons with 3 states - normal, hover, and pressed - and I will be using the sprite based method which places all 3 states in the same image file.

Shapes ‘n Shapes

Achieving the right graphical look is important so that you are able to present your design in the manner you desire - be it rational UI or crazy mystery meat navigation. It’s important to have your choices look deliberate and not haphazardly chosen - it will help you when presenting to the client and in the final UI users will interact with.

Photoshop’s shape tool is a quirky thing with a couple important options to understand before you start working. First there is the choice between creating a vector-based Shape Layer or a pixel based Fill pixels option. In a nutshell the vector option is versatile but clunky and the pixel option is less flexible (especially when you want to modify the shape later) but it acts predictably in the pixel world. I use pixels simply because the vector tool can be a pain.

Of equal importance is the snap to pixels option which is accessible from the hidden menu at the end of the shape option bar (see fig. 2, step 1) when you are using the rounded corner shape. This will prevent your shapes from displaying unpredictable antialiasing which becomes very important as you duplicate shapes and specify heights and widths in CSS. Also make certain if you’re created a rounded corner shape to turn anti-aliaising on (fig. 2, step 3).

(fig. 2)

Now you can create shapes! Choose a radius for your rounded corners and you’re ready to go.

Button Styles

Button styles have been evolving as long as the web has and there are an infinite number of styles you could use but I am going to demonstrate a sensible approach that is universal and not heavy on character. The following are tips on using Photoshop’s Layer Styles to create a button like the ones used in the examples.

• Inner Shadow — Pick a bright color, choose the Color Dodge blending mode, bring choke to 100% with a size of 0 and an angle of 90%. This gives a great top edge highlight (tip shout out to Andrew Wilkinson of Metalab Design).
• Inner Glow — Mirror Inner Shadow’s settings and play with the opacity
• Gradient Overlay — Choose colors not too far apart on the color wheel, the gradient should be subtle
• Stroke — A 1px stroke works best. The object is to pick a slightly darker version of your darkest gradient color to hold things together.

These are your basic settings for the normal state. For the hover state alter the gradient overlay and lighten both colors. The pressed state requires a few new styles and a couple adjustments to get that indented look.

• Inner Shadow
  • Color: black
  • Blend mode: multiply
  • Opacity 75%
  • Distance 4px
  • Choke 4%
  • Size: 13px
• Bevel and Emboss
  • Style: Outer Bevel
  • Depth: 100%
  • Size: 1px
  • Angle: -90°
  • Highlight Mode: Screen
  • Highlight Opacity: 40%
  • Shadow Opacity: 0%

The CSS behind the buttons

The 3 states of the button are contained in one image so you will use the background-position CSS attribute to control which states are shown for normal, hover and active states. This method is known as sprites and there are many great resources on it. The primary benefit is since all 3 states of the image are loaded in the same file there is no additional loading on hover and active states. The CSS for changing the background image would look something like this:

#bee_button a {
  display: block;
  text-indent: -5000px;
  width: 136px;
  height: 41px;
  background-image: url(/images/bee_button.png);
  background-repeat: no-repeat;
}

#bee_button a {background-position: 0 0;}
#bee_button a:hover {background-position: 0 -41px;}
#bee button a:active {background-position: 0 -82px;}

Conclusion

You can see buttons like these in action on the Widgetfinger home page and inside both Hoptoad and Thunder Thimble. They provide a tactile experience for the user and an extra bit of visual feedback when a button has been clicked.