---
title: How to make really nice buttons
teaser:
tags: design
author: Kevin Burg
published_on: 2009-07-10
---
## 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](http://metalabdesign.com/)).
- 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](http://www.alistapart.com/articles/sprites) 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](http://www.widgetfinger.com/) home page and inside both
[Hoptoad](http://www2.hoptoadapp.com/) and [Thunder
Thimble](http://thunderthimble.com/). They provide a tactile experience for the
user and an extra bit of visual feedback when a button has been clicked.