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.

Step 3 – CSS

Unordered list

To style my list, I started by getting rid of the default margin and padding by setting both values to 0px. I set the width and height of the unordered list to the dimensions of the navigation bar, and set the sprite as the background image.

List Items

I set the list items to the full height of the sprite image, even though only a portion of it will be visible within the navigation bar. I set the width of each list item to the width of the corresponding image within the sprite. I displayed the list items inline (so they sat next to each other), floated them left and hid the text and bullet points.


I set the links to the height of the navigation bar. This meant that a user would be able to click anywhere on the button to activate it the link. Finally, I told the browser to move the whole background image down whenever the hover effect was activated.

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!

Cookie Consent

We use cookies to ensure that we give you the best experience on our website. If you continue to use this site we will assume that you are happy with it. Read more in our Privacy Policy.