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.
As a novice, this approach to creating nice looking buttons seems like the obvious choice.
- With Photoshop, you can create the buttons in under a minute.
- These buttons stand out to users and don't look so much like "built-in" form elements.
- 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.
- 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
- You can produce buttons with many of the favored graphic effects using only HTML and CSS.
- 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:
- 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.
- 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.
- 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.
- They can be difficult for others to modify if they don't have your graphic source files.
- Inconsistencies in your site color scheme can be introduced if your button colors aren't kept in synch.
- When your site's color scheme changes, you need to update all of your buttons.
- 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:
- Single color solid borders
- Rounded corners
- Background gradient
- Larger text with significant padding
- 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
- display: block
Many CSS styles only work on block-level elements. Unfortunately, we need many of these to properly style our buttons. Gradients are among these styles. By displaying an element at a block-level, we are still able to use floating to position the button next to other elements, as show in the example below. - width: 200px
Given that these are now block-level elements, we need to assign a width to them. Without assigning a width, the browser will decide, which may introduce line-breaks into your button text. This may be acceptable to you though. - padding: .5em 1em
This puts a little padding at the top and bottom, and more padding on the sides of the button. This is a common practice, as typically, screens are wider than they are tall. - font-weight, color & border & text-align
These are self-explanatory, as well as subjective. Choosing colors is difficult, but there are tools out there to assist. This is one example of an excellent color chooser: http://www.colorschemedesigner.com/ - border-radius: 4px
We specify one value here, but this is the same as: border-radius: 4px 4px 4px 4px;
As with the border itself, these 4 values correspond to the four corners of the "box" we are styling. - background: #ffdc73
It may seem trivial to add this style, as we are applying a gradient background. I like to include it, for browsers that don't support CSS gradients. Typically, I set this color to either the gradient start or finish color. - text-decoration: none
Most often, you will be applying these style to links (the <a> tag). Browsers give a default style of text-decoration: underline; to links. The underline doesn't fit well our button design, so we remove it. - gradients
The next 3 lines are confusing. They are a fancy way of saying that gradients really haven't been finalized in the CSS specification. So, browsers have introduced their own "syntaxes" for gradients. Internet Explorer uses it's proprietary filter property to build the gradient, while the other browsers use "prefixes" to identify their gradient styles. Unfortunately, at this point, we do need to specify all of them. - opacity
This is where our rollover effect comes in. This style allows us to reduce the opacity of our button. We can use this, on the hover style to increase the opacity back to full, giving a nifty hover effect.One caveat though, is introduced in Internet Explorer versions below 9.x. The filter property is necessary for opacity in these browsers. However, you can only use one filter property!
Because of this, we need to supply all filters in one style, as shown in the code above. And further, on the hover style, we need to duplicate any filters that are applied, even though they don't change with the hover.
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!