themorgue.org

The last few articles here have dealt with using CSS to create custom buttons with hover and click effects. While in a perfect world, the CSS versions would be enough, but in a world with MSIE, they fall a little short. Some versions of MSIE only allow active and hover effects on <a> tags, but what if you want to create a custom button using some other type of tag? For that case, you’ll have to resort to using Javascript.

There are many different Javascript libraries to make cross-browser differences fade away, but I have been leaning towards using MooTools. So my example here will be shown using MooTools, but I would imagine most of the other Javascript libraries would work as well.

The first thing we need to do is change our CSS code to use class names rather than the :active and :hover pseudo-classes. The new CSS code is shown below with the old selectors commented out for reference.

/* Old Selectors: #nav a:hover, #nav a:hover span */
#nav .btn-hover, #nav .btn-hover span {
    color: #2A5E5E;
    background-position: left -22px;
}

/* Old Selector: #nav a:hover */
#nav .btn-hover {
    background-position: right -22px;
}

/* Old Selectors: #nav a:active, #nav a:active span */
#nav .btn-click, #nav .btn-click span {
    color: #74A074;
    background-position: left -44px;
}

/* Old Selector: #nav a:active */
#nav .btn-click {
    background-position: right -44px;
}

Just so you don’t have to go back and look, our original HTML code was as follows.

<div id="nav">
<a href="#"><span>OK</span></a>
<a href="#"><span>Cancel</span></a>
</div>

In order for these new selectors to work, we have to apply the btn-hover and btn-click classes at the appropriate times. The events we are going to use are mouseover/mouseout for the hover effects, and mousedown/mouseup for the click effects. MooTools makes it insanely easy to add events to multiple elements using the $$ function in combination with the addEvents method. The code to do this is shown below.

window.addEvent('domready', function() {
    $$('#nav > *').addEvents({
        'mouseover': function(e) { this.addClass('btn-hover') },
        'mouseout': function(e) { this.removeClass('btn-hover') },
        'mousedown': function(e) { this.addClass('btn-click') },
        'mouseup': function(e) { this.removeClass('btn-click') }
    })
})

You’ll, of course, have to include the MooTools Core and More scripts from the MooTools web site. As you can see from the code above, the btn-hover class is added and removed by the mouseover and mouseout events, respectively. And the btn-click class is added and removed by the mousedown and mouseup events, respectively. The $$ function is selecting all immediate children of the element with ID of “nav”. In this case, that would be the <a> elements. With all of this in place, all of the button effects should work in all browsers now even if you use elements other than <a>.

The last article I posted here showed how to add hover effects to CSS-styled buttons. It is possible to use a similar technique to add onclick effects with CSS. This technique works well in Safari and Firefox, but not quite so reliably in Internet Explorer so you may want to combine this technique with the onclick support of Javascript libraries like MooTools.

The first thing to do is add another image to our button sprite. We’re going to add a green version of the button to display when the button is clicked. Here is our button sprite with all three variants.

To create the onclick effects, we are going to use the CSS :active pseudo class. The CSS code itself is almost identical to the CSS code used in the hover effects.

#dialog a:active, #dialog a:active span {
    color: #74A074;
    background-position: left -44px;
}
#dialog a:active {
    background-position: right -44px;
}

The only difference between this CSS code and the hover CSS code is that the :active pseudo class is now being using instead of :hover, and the background position has been shifted up by another 22px to display our third button image (we also changed the text color of the button to coordinate). Now when you click on the button, you’ll see the following effect.

As mentioned earlier, you have to be a bit more cautious with this trick because MSIE doesn’t work so well, but using Javascript and onclick events you can set the background position programatically to get the same result.

The last article I posted showed how to use a single button image to create variable width buttons with custom backgrounds. That’s all well and good, but what about hover effects? You can change the look of your buttons, including the background image very easily.

The first thing we need is an image that contains both the default and hover versions of the button. Put the default image on top and the hover image below it as shown here.

Now all we do is add new rules for the hover action. All the new rules have to do is change the background-position so that rather than getting the default button image, we reposition the background image so that we see the hover background image. To do this, we simply bump the background image up by the height of the button (22px in this case). We also added a text color change just for kicks. Here are the CSS additions for the hover effects.

#dialog a:hover, #dialog a:hover span {
    color: #2A5E5E;
    background-position: left -22px;
}
#dialog a:hover {
    background-position: right -22px;
}

With these rules in place, hovering over a button gives the following effect.

A lot of times when people create buttons on web pages, they want them to have nice gradients in the background and rounded corners and such. The trouble is that in order to create nice looking buttons like that, you either have to make the button contain the text itself, or you have to chop up the image into pieces and use the sliding door technique. The problem with putting the text in the image is that it is much more difficult to do translations. The sliding doors technique is annoying because you have to chop your images up. However, there is a third way which is much easier and will work in most cases.

The third technique is a lot like the sliding doors technique, but doesn’t require you to chop the image up. All that it requires is an image that looks like the button you want to create and is wider than any content that you may want to put into it. We’ll use the button shown below.

We are going to create a typical dialog style button bar with an OK button and a Cancel button. The HTML for this is shown below.

<div id="dialog">
<a href="/"><span>OK</span></a>
<a href="/"><span>Cancel</span></a>
</div>

Each button in this code consists of both an <a> tag and a <span> tag. The names of the tag aren’t important, but you do need to have two of them: one to render the left side of the button and the other to render the right side of the button. In our example, we are going to use the <span> tag to render the left side and the <a> tag to render the right side. Let’s start with the left side first.

The CSS code below will put our button image behind the <span> tag as well as set the height of the element to the same height as the background image and set the appropriate font size.

#dialog a span {
    background: transparent url('button.png') no-repeat scroll left 0;
    display: -moz-inline-box;
    display: inline-block;
    height: 22px;            /* Same as height of background image */
    font: 16px/22px "Lucida Grande", Arial;
}

We used the inline-block display type so that we could set the height of the button properly. Since Firefox 2 doesn’t support the inline-block type, we had to use -moz-inline-box as well. With these rules applied to our HTML, we get the following representation.

The text is crammed onto the left side, so add the following padding rule to the above CSS code to give us some room on the left side.

padding: 0 0 0 15px;

Our buttons should now look like the following.

We’re almost there, we just need to get the right hand side of the buttons rendered. Of course, that’s where the trick comes in. We are going to add 15px of margin to the right of each <span> tag (using margin: 0 15px 0 0). This will allow 15px of the <a> element to show through. We then use the same background image that we used for the <span> element except that we align it to the right side of the element. Here is the CSS rule for the <a> tag.

#dialog a {
    background: transparent url('button.png') no-repeat scroll right 0;
    display: -moz-inline-box;
    display: inline-block;
    height: 22px;
    font: 16px/22px "Lucida Grande", Arial;
}

We now have nice looking buttons using just a single image and CSS!

Since most of the rules for the <span> and <a> tag are the same, we can combine those rules and just override the differences in a second rule. We’ll also add a couple of attributes to set the color of the text and turn off any link underlining.

#dialog a, #dialog a span {
    background: transparent url('button.png') no-repeat scroll left 0;
    margin: 0 15px 0 0;       /* 15px == amount of background image to the right */
    padding: 0 0 0 15px;      /* 15px == amount of background image to the left */
    display: -moz-inline-box; /* Firefox 2 support for inline-block */
    display: inline-block;    /* Must be used so that height can be set */
    height: 22px;             /* Same as height of background image */
    font: 16px/22px "Lucida Grande", Arial; /* Appropriate font size / line height */
    color: black;
    text-decoration: none;
}
#dialog a {
    background-position: right 0;
    margin: 0;
    padding: 0;
}

Here is the final result.

Not only can you use this technique for buttons, but you can also use it to style tabs the same way. While this isn’t a perfect solution since it requires a fixed height font to be used in the button, it is a simpler way of handling styled buttons since you don’t have to worry about slicing and dicing your button backgrounds.