Web Tip: Creating a Reusable “Button” Class

Web pages are full of buttons. Navigation, links, “next” buttons, “submit” buttons, “OK” buttons, “close” buttons… the list goes on. When you go about designing a new web page, chances are its going to have a lot of buttons. Make life easier for yourself by creating a button class that you can reuse over and over in your HTML whenever you need a button.

Not only is this a favor to you, but it’s good for your users and aesthetics as well. Consistency is a key factor in usability. Let’s get started.

Gradient Background for the Button

Keeping things simple is key here. We definitely want to keep our buttons text. This is a must for accessibility, usability, and extensibility. One way we can do this, but still make our buttons looks great and visually distinct is by giving them a nice gradient background.

This gradient background will repeat horizontally, so buttons can be as long or short as we need them, and not be limited by the dimensions of the graphic. Let’s create the gradient in Photoshop. Create a new document 20px wide by 75px tall. This graphic could be as thin as 1px since it’s just going to be repeated horizontally, but we’ll leave it at 20px so we can see what we are doing. The file size difference is negligible anyway.

Fill the document with any color. It doesn’t matter which, we’ll be covering it up with a layer style anyway. It has to be filled though, for the layer style to have something to be on top of.

Now double click that layer in the layers palette (Window > Layer) to bring up the layer styles. Click on the Gradient Overlay style. By default, you should have a straight up-and-down gradient of white to black. This is good, click on the gradient preview and alter the colors to something more suitable to your design’s button style. In this case, some nice saturated reds will do:

Save out your document (strangely enough, PNG-24 is often the best preset for images like this. Highest quality, lowest file size). Using a smart naming convention like “button-bg.png”. Make sure you save your PSD for this, who knows when you might wanna jump back in there and alter colors, positioning of the gradient, or any other subtle details.

CSS for the Button

Now we’ll need to set up some CSS for our generic button class that utilizes this new background. We’ll use a class “.button”. Simple, obvious, and generic. That’s smart code. We don’t want to do anything to specific like “#mainContent #nav li a.button”, because the whole point of this is that the class is generic and reseable anywhere on the page.

Here is how I would set up this class:

.button {
   background: url(images/button-bg.png) repeat-x top center #650606;
   border: 1px solid white;
   -moz-border-radius: 5px;
   -webkit-border-radius: 5px;
   padding: 5px 8px;
   color: white;
   font-weight: bold;
   font-size: 12px;
   text-align: center;
}

.button:hover {
   background: white;
   border: 1px solid red;
   color: black;
}

Wow that’s a bit of a mouthful for a CSS statement huh? Every bit of it is important though. Let’s go through each attribute.

• Background: this is where we apply the gradient image we created. Notice the “top” setting, which keeps it vertically aligned to the top of the button and that the image repeats horizontally with “repeat-x”. Also notice there is a hex-code declared for the background color. This value is set to the same color as the very bottom of the gradient image. Just in case this button grows taller than the image, the color will be nicely continued.
• Border: A single-pixel white border is applied here. If our button is over white, this will invisible, but since I want to use a colored border on the hover state, the regular state will need a border too. Otherwise, there will be a slight “jump” on hover that is undesirable. The next two styles are to round the corners on the button. The first is specific to Mozilla-based browsers (Firefox, Flock…), the second is specific to Webkit-based browsers (Safari, Konqueror…). Other browsers (IE) will not see the rounded corner, but no harm no foul.
• Padding: This is vital to keep the text away from the edges of the button. Gives the button some body. Makes it more button-like and easier to click.
• Color: Our background is a dark red color, so to make the text show up, white is good. Just in case images are turned off on a browser, the background of our button will still be dark red because we set that in the button as well, so white here is perfectly safe.
• Font-size/weight/text-align: Pretty much self explanatory here. Normally I might not size text in PX values, but in the case of a button, making that next not resize-able in IE 6 might be ideal for consistency.
• Hover: This is what is necessary to make our button actually feel like a button. Buttons do something when they are rolled over. Our will instantly switch to a white background with black text and with a red border. Very stark, very obviously a button.

Using Our Button in Code

Because our class is so generic, we can use it anywhere!

Regular ol’ hyperlink:

<a href="/home" class="button">Go Back Home</a>

Really long link:

<a href="/contact" class="button">Visit The General Contact Form Page</a>

Submit button:

<input type="submit" class="button">Submit</input>