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>

Our final effect can look like this:


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
  • Now if only there was a way to make it blink on and off…

    • You could make it blink on and off though (if u weren’t kidding) by simulating this process using CSS3: RGBA colours together with transition effects. (“fade” it in and out by using the last parameter of the “rgba(,,,)” method, and looping the transition effect for “color”. (might have to do some javascript action here, I do not know ;)) of course, not compatible with all browsers 😉

  • Cool if you like your sites to look like they were made on Geocities….

  • mark

    It would be much less code if you just skip the span class=”red/blue” and just style the normal link and add the span.

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


    • Todd

      You can use both methods, I leave it open for people to add in as many span tags and different colors as they would like. But yes, your code is also correct!

      • mark

        I was never questioning my code but yours … the clases are just redundant.

  • Wouldn’t it be nicer if we just fetch the string through GetElementBy functions in javascript and select part of the string randomly, filling up with random colors ?

Home CSS Deals HTML HTML5 Java JavaScript jQuery Miscellaneous Mobile MySQL News PHP Resources Security Snippet Tools Tutorial Web Development Web Services WordPress