Tutorial: How to Build a CSS Sprite

You may hardly notice them, but hover effects are one of many little touches that web designers use to add interest and depth to a site. Without hover effects, buttons would look flat and boring, and may even lead to a negative user experience as people may not realise that they are buttons at all.

One way designers create hover effects is by designing a ‘sprite’ for the button. A sprite is an image containing other images. They are often used to save bandwidth (it is more efficient to load one sprite than 32 individual images) but also have a useful design purpose.

CSS sprites can be used to show a browser how a design element should look in all of its different states of activity, for example on hover, on click, and inactive. I recently built my first sprite navigation and wanted to provide a brief walkthrough, for those of you that are interested or who are at a similar point in their coding journey.

Step 1 – Design your buttons

I started by designing my button images in Photoshop. Alternatively there are many web design resources where you can download pre-made buttons (such as: this one).

Social Media Icon Sprite

I needed a unique image for two different states of activity: inactive and on hover. I saved each image as a separate file and used the ‘place’ command in Photoshop to arrange them vertically, edge-to-edge with no spaces and no overlap. This was my sprite. I saved it as a .GIF, which is a web-friendly file format.

Next I needed to use HTML and CSS to hide and reveal parts of the sprite depending on the state of activity of the button. Since I am an Adobe junkie, I used Dreamweaver as my code editor, but you could use any good software.

Step 2 – HTML

Since my button was for a navigation bar, I needed to create an unordered list in HTML. I gave the list and each list item unique IDs so that I could apply specific CSS rules to them later. I called my list ‘social-nav’ and my list items ‘nav-1’, ‘nav-2’ and ‘nav-3’ (inventive I know). I wrapped the list items in a tags so that I could link them up later on.

A quick check in ‘Live’ mode confirmed that the sprite navigation was working correctly! Moving my mouse over the leftmost button appears to change the Pinterest logo from white to red – although what is really happening is the background is shifting to reveal that part of the image.

As a (very) novice coder, building my first sprite navigation was a bit of a breakthrough and I hope it was useful and interesting to you too. I also hope that it gives you a newfound respect for web designers for the effort and attention to detail that goes into crafting a great user experience!