CSS Flick animated buttons

In my surfing (strictly of the web variety) yesterday, I stumbled across this tutorial that shows you how to make a CSS Flick book - literally an animation you can scroll across and change the image.
The jist of the workings is thus:

You allocate a 20px band for each frame and on :hover the you reveal the full frame across the whole div. That's the simple explanation anyway - check out the tutorial for full details.

I thought this was pretty fab so figured I could take it one step further:
animated buttons that transition as you approach them - and all without the use of javascript or flash.

Here's how I did it:

1. Create your container div for your buttons and inside it make 9 <a href="#"> links with different id's.

2. position them so you create the following pattern -

1444444444449
1255555555589
1233333333389
1233333333389
1266666666689
1777777777779

To help your positioning, you should make the outside div position:relative and the inner tags position:absolute.

3. Now you assign backround images: the outside divs (1, 4, 7, 10) need 1st frame, next in (2, 5, 6, 8) need the 2nd frame and div 3 wants the over state. Set all background positions to off screen somewhere {background-position:-500px}.

4. The best bit:
give all of your a#id:hover's a reset background positioning of '0 0' to put them in the top left of the container div

5. You also need to throw in some z-indexes. a#id = z-index:2, a#id:hover = z-index:1. This makes sure that once a frame is showing, the other a tags are still able to be rolled over (since they are now on top).

I think that's pretty much it. Have a look at this and see what you think.