Sliding Door Sprites

One of the newest techniques for creating versatile and simple to deploy buttons are called “Sliding Door Sprites”. This page is designed to help you not only understand what they are and how to use them, but we have come up with a cool and simple generator to create them on the fly.

We have created a few different types to demonstrate the concept, and you can play with the variations… once you find a sliding door sprite you like, you can download the entire script, css and images and put them on your site.

We have made a few samples with popular sizes, so you can download the images and edit or change them to suit your color scheme. If you keep the sizes and names the same, it will all work.

How does it work?

You have probably figured it out by now… sliding door sprites are made up of two images… a left and right image. The right part slides out as content is filled in like in the illustration below – we have shown them with a gap (highlighted in gray gradient) to make it simpler to see.
Sliding door sprites are made of two images or more...
Sliding Door Sprite Illustration

The left part of the image is the <span> tag, and as it expands to accomodate the text, the right image ‘slides’ along it. The gap is not seen, as the two sides are matched up precisely.

Our sprites, use four image sections set in two separate images, they also rollover. So the entire sprite image set looks like this:
Sliding Door CSS Sprites

The change on mouseover, will hide or expose part of the sprite using just CSS, like this:
Demo of CSS sprite

Leave a Reply