NOTE:  This tutorial assumes a basic familiarity with CSS.   If you have no idea how CSS
is laid out or formulated, you may want to read our Introduction to CSS before proceeding.

You see a lot of hover effects on web nowadays. When you hover your mouse cursor over a link it usually changes to something else - It doesn't matter if the link is an image or just text, there's usually some sort of hover effect in place.   If it's a graphical link the hover effect is usually another image displaying the hover effect. This image is often preloaded on page load so that the user sees the effect right away, but there's also another way to do it. How about using just one image and changing its state/position it with CSS?  This is pretty simple trick that I learned from the web some time ago. I haven't seen many tutorials about this, so I decided to share it with you!

Before you can proceed, of course, you need a graphical button designed in the usual way. If you don't have your own you can use the one I'm using (Adobe Photoshop .PSD file), or you can skip the image creation process altogether and use my tutorial button instead.

My button is pretty simple, having one layer for the basic button graphics and another for the hover effect. Now it's time to do some Photoshop magic. To make the effect work you need to create a new image which has both states side-by-side. To do this, simply double your canvas width and copy the images into the one document so that they are side-by-side.  To be perfectly honest it really doesn't matter if the images are adjacent vertically or horizontally... but for the rest of this tutorial we will assume the horizontal method.  If you need a visual example of what you are trying to achieve, take a look at my pre-done tutorial button - its fairly self explanatory!

Once you have finished the image creation and saved it, its time to create the HTML and CSS. You won't need to use the IMG tag at all - Just the A tag.



HTML

And that's it! Basically what you are doing in this code is creating an A tag set as wide and high as the button, and then using the background-image property to assign the graphics to the tag. You then make a hover CSS tag and move the background image with background-position property to reveal the other image on the right side of your hover image. A bit like a flip-book really!  In this case we move the background image 200px to the left (-200px).

You can see the CSS hover effect in action below:

And that's it!  This method can also be amended to include different link states, but I'll leave that for you to figure out on your own!  ;)   If you have questions about this tutorial you can find me by the nickname Telos on the BioRUST Forums!   Have fun!

- Tutorial written by Telos

Automatic Translations: