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).
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.
Links
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!
