How To Make Walking Links

Avatar of Chris Coyier
Chris Coyier on (Updated on )

While screwing around at the ol’ Zen Garden, I ran into a pretty neat little effect for underlined links. We’ve talked about this before, but never incorporating animation.

A “walking link” is a link with a dotted underline created by a background image. Upon rollover or active state, the dots become animated and begin to walk. This is done with a simple image swap on hover or active state, with both background images being created from the same super-simple 3-pixel Photoshop file:


Regular state get the non-animated version, hover and active state get the animated version:

a, a:visited {
   background: url(images/dot.gif) repeat-x center bottom;
   text-decoration: none;
   padding-bottom: 2px;
   color: #900;
   a:hover, a:active {
      background: url(images/dotwalk.gif) repeat-x center bottom;

Check out the example to see it in action.