CSS

CSS for a Multi-Colored Link ‘:hover’

This is a cool CSS effect to use with links. We can create a link that will change to two different colors when you hover over it.

In order to achieve this effect, we use span tags in the links and our CSS will look like this:

a.twocolors span.red {
    color: #000;
    text-decoration: none;
    }
a.twocolors:hover span.red {
    color: #FF0000;
    text-decoration: none;
    }
a.twocolors span.blue {
    color: #000;
    text-decoration: none;
    }
a.twocolors:hover span.blue {
    color: #0000FF;
    text-decoration: none;
    }

and then our HTML will look like this:

<a class="twocolors" href="#">
<span class="red">Hover</span><span class="blue">Here!</span>
</a>

Our final effect can look like this:

DEMO

With this effect you can create links with all different colors on hover and you can use CSS3 transitions to build upon this effect even further! Ask any questions below!

A web and application developer, based in Chicago, IL. Founder of Dragon Fruit Development (www.dragonfruitdevelopment.com) More articles by Todd Dunham
Home CSS Deals HTML HTML5 Java JavaScript jQuery Miscellaneous Mobile MySQL News PHP Resources Security Snippet Tools Tutorial Web Development Web Services WordPress