This is an extremely simple and lightweight way of created a link that animates on hover. All you have to do is create your link in the normal way using HTML. For example:
Now style this code so that you have a background image for ‘p.animated-rollover a’ and a different background image for ‘p.animated-rollover a:hover’. The hover state background image is going to be an animated gif. This is how you get the animation on hover.
-
p.animated-rollover { width: 150px; height: 40px; background: url(images/animated_rollover_a_hover.gif); text-align: center; line-height: 40px; }
-
-
p.animated-rollover a { width: 150px; height: 40px; background: url(images/animated_rollover_a.gif); display: block; }
-
-
p.animated-rollover a:hover { background: url(images/animated_rollover_a_hover.gif); }
I’ve left out any text styling in this example. You could use ‘text-indent: -5000px; overflow: hidden’ and use the background image for the text if you like.