Option for Combined (Top/Bottom) Image

It has been suggested to me (by a peer user of Hostgator's web site hosting services) that the Buttommill project could usefully include a configuration option for creating and including in its button downloads a combined image for use with the CSS a:hover pseudo style. The idea is that the combined (top and bottom) button images could then be used with CSS a:hover to create the rollover effect without the "flashover" micro-delays that occur when using javascript to swtich between two separate images. In lieu of javascript image switching, the user would apply CSS styles something like the following:

a.button_x {
width: 160px;
height: 24px;
display: block;
overflow: hidden;
background-color: transparent;
background-image: url('button_x.png');
background-repeat: no-repeat;
background-position: top;
}

a:hover.button_x {
background-position: bottom;
}

It seemed to me like an excellent suggestion. I've tried it myself and it works very well indeed. It results in very fast and very smooth rollovers.

So this note is just to let you know that I am now working on implementing the suggested configuration option on my own http://virtech.org/home/buttonmill/ site. You can monitor and download the results in the "recent buttons" there. I have not yet updated the source code download as I'm still "bug hunting", but I will keep you informed here as things progress.