SiteKickr Web Development

Buttons – the time-saving, bandwidth-reducing, seo-friendlier way

I typically write articles aimed at the intermediate / advanced web developer, mainly because I had felt that many of the introductory topics wouldn't be interesting enough, or because there wasn't enough content to consider it an article. I've been looking at it from a different angle lately. Not only do many novice developers start off down the wrong path in some areas, but some of those areas are actually interesting, and lend themselves to a detailed discussion. So, this will be my first post, in hopefully a long line of posts that explore some of the more basic web development topics in depth.

With the introduction out of the way, l'd like to shed some light on button graphics. When I use the term button graphics, I'm referring to buttons which contain text, but are saved as image files (png, jpg, gif), and displayed within a website with the <img> tag or <input type="image"> tag. See the image to the right for an example.

As a novice, this approach to creating nice looking buttons seems like the obvious choice.

  1. With Photoshop, you can create the buttons in under a minute.
  2. These buttons stand out to users and don't look so much like "built-in" form elements.
  3. They are typically small in file size as well. If you take a look at the image information for my example button, you'll notice that it's only about 2.4K in size.
  4. You can provide the textual value of the button using the alt attribute to your <img> or <input> tag, for that off-chance that your image can't be loaded, or your visitor is using a text-only browser (they exist!).

With those four reasons, you might be surprised to find that most seasoned web developers consider button graphics to be a bad practice. It's true, there are many more reasons to avoid button graphics than to use them. The list below is perhaps a little exhaustive, but it really drives home the point that button graphics should be avoided whenever possible.

Reasons to avoid button graphics

  1. You can produce buttons with many of the favored graphic effects using only HTML and CSS.
  2. Buttons may be small in file size, but each image loaded into a website requires another HTTP connection to load it, as images are loaded separately from the actual page content. See the following posts for more information on that, they are loosely related, but provide some background information on why avoiding additional HTTP connections is a good idea:
  3. They don't provide any value to search engines. Modern search engines may have the capability to recognize text within an image, but they won't bother wasting the resources on button graphics.
  4. They are time consuming to modify. Changing the text within a button requires that you open your graphics editor, find the file, modify it, save it, upload it to the web.
  5. Most web users today have enabled caching within their web browsers, which means, the browser stores images internally, so it doesn't need to load them from your server. That becomes a problem when you change one of your button graphics.
  6. They can be difficult for others to modify if they don't have your graphic source files.
  7. Inconsistencies in your site color scheme can be introduced if your button colors aren't kept in synch.
  8. When your site's color scheme changes, you need to update all of your buttons.
  9. There are many more rollover effects that can be produced with HTML/CSS buttons. This is contrary to what many novice developers think. Many times, a beginner will choose button graphics simply because you can do a rollover effect by changing to a different button graphic when the user mouses over the image. This practice only serves to multiply all of the above reasons! You CAN have awesome rollover effects, ones cast a huge shadow on simple image changing effects.

    Moreover, using an image-based rollover technique requires that you "preload" the rollover image. If you neglect to preload the image, it will be loaded at the moment your use first hovers over the button, which may create a flicker effect as the rollover image is loaded. So, you decide to preload your rollover images. Then, what happens when your button is never rolled-over? You've essentially loaded an image that's never even used!

With all those reasons to avoid button graphics, it would be cruel to leave you without an introduction to creating great-looking HTML/CSS buttons!

 

Creating the HTML/CSS button

Let's take a look at some of the common characteristics found in button graphics:

  1. Single color solid borders
  2. Rounded corners
  3. Background gradient
  4. Larger text with significant padding
  5. Brighten on rollover

Every one of these effects can be produced using only CSS, and what's even better is that they can be applied to just about any element in your HTML. Most often, though, you will apply them to the <a> and <input> elements. Let's start with the code,

.standard-button {
    display: block;
    width: 200px;
    padding: .5em 1em;
    font-weight: bold;
    color: #330570;
    border: 1px solid #333;
    border-bottom-width: 3px;
    border-radius: 4px;
    background: #
edfd3f;
    text-align: center;
    text-decoration: none;
    filter: progid:DXImageTransform.Microsoft.gradient (startColorstr='#edfd3f', endColorstr='#eeeeee'); /* IE */
    background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#eeeeee)); /* Safari/Chrome  */
    background: -moz-linear-gradient(top, #ffdc73, #ffbf00); /* Firefox */
    filter: alpha(opacity = 85); /* IE */
    opacity: 0.85; /* all others */
}

.standard-button:hover {            
    filter: alpha(opacity = 100); /* IE */
    opacity: 1.0; /* all others */
}

The CSS, in detail

 

The following link contains a more complete CSS Button Example, and includes all of the styles above.

It may be difficult, at first, to absorb all of the details of these styles. But, now consider that you can easily apply this entire set of styles to any element, simply by including a class attribute, in this case:

<a href="..." class="standard-button">My Button Text</a>

Now that you have seen this in action, if you go back to review the nine reasons to avoid button graphics above, a few of them will make a little more sense.

There are unlimited different ways you can combine styles to create interesting looking effects for your HTML buttons, so have fun, experiment, and say good-bye to button graphics!