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.

Rules made up by you

Kelly Johnson worked at and was one of the driving forces behind Lockheed Martin’s Skunk Works group. As part of an upcoming project management book I’ve been writing (it’s called “SWARM”, is meant for managers of small teams of software developers, and has a picture of bees on the cover), I’ve been reading up and thinking about the business processes which are in place at technology-but-not-software business, including the Skunk Works.

Aside from the success the team had building aircraft, I think they were rather innovative in their organizational management as well, and I was inspired to write this post when I ran into this gem – Kelly’s 14 Rules.

Reading over this list, I think that Lockheed’s Skunk Works might be the agile developers of the aerospace defense world—from 60 years ago. I’ve reproduced the list here with an identification of a modern software development rule or business practice that it corresponds to..

Finally, according to wikipedia, there’s an unwritten-but-sometimes-spoken 15th rule…

Starve before doing business with the damned Navy. They don’t know what the hell they want and will drive you up a wall before they break either your heart or a more exposed part of your anatomy.

I’ll leave that one as an exercise for any reader who has done client work to negotiate for themselves.