Designing CSS Buttons

Designing Basic CSS Buttons

By Andres Vidal 12/01/07

Updated: 1/15/2008

Lets jump right into designing the buttons...

FYI: you can download the Glass Skin which contains a sample photoshop file. Download Glass Skin

1. Open your favorite imaging program. I'll be using Photoshop for this tutorial. You can start a new document or download one of the templates from our download section.

2. Design your button with the actual sizes you'll use on the web. I'll start my example with a 250px wide by 23px high button.

Blank Doc

3. After tweaking and playing around with styles I created this sample button using the most web-compatible text settings.

Text Settings

4. Now we get into the first set of important tricks. We must change the canvas height to fit the current button and other states (Hover or Active). We do this by multiplying the canvas height by (3) and setting the anchor to the top. The reason we use (3) is because we need a gutter between the top and bottom that can then be transparent to make the sprites (button images a.k.a. skins) compatible when browsers change the text size.

The guide is set 5px from the left. This is to mark the gap that will show the button edge. This is similar to A List Apart's Sliding Doors.

Canvas height

5. Now, this step depends on your design style. The idea is to replicate the top button and drag the copy to the bottom. The bottom button can then be styled to represent a different hover or active state. Note: Make sure to keep all button borders flush with the graphic borders. Any inconsistency in alignments can cause issues at production. In this example, I used layer styles and hid the background to make the sprites compatible when a user resizes text.

Layers

6. Ok. Here is the trickiest part of this tutorial. Because firefox has a bug that can't be fixed right now, we have to alter the typical sliding doors method from a top/bottom or left/right background positioning to a calculated negative x positioning method.

What this means is that the door wedge has to be of the same height as the button with a small exact width (the normal state), a transparent gutter, and then the hover or active state. In this 23px-high example, the left wedge is 5px wide, the transparent gutter is the max-width of the button 250px wide, and the right wedge is 5px wide. Overall, the new door wedge is 5 + 250 + 5 = 260px wide.

The left Image

7. The final product should look a little like this:

The Wedges (260 x 23 px)

Left Button

The Button Top/Bottom (246 x 92 px)

Top and Bottom

Getting Started

Downloads

Button Skins

About CSS Buttons