gadgetto
2/23/2012 - 4:39 PM

Dual color changing link by CSS3 transition

Dual color changing link by CSS3 transition

sample.html
content_copyfile_download
<!-- content to be placed inside <body>…</body> -->
<h1><a href="#"><span>Left changes color</span> with right part</a></h1>
sample.css
content_copyfile_download
/**
 * Dual color changing link by CSS3 transition
 */

h1 { /* only for decoration */
    background-color: #2d2d2d;
    padding: 30px;
    text-align: center;
    font-family: sans-serif;
}

h1 a, 
h1 a:link,
h1 a:visited {
    color: #fff;
    text-decoration: none;
    transition: color 0.5s linear;
}
h1 a:hover {
    color: #9ec41a;
    text-decoration: none;
}
h1 a span,
h1 a:link span,
h1 a:visited span {
    color: #9ec41a;
    transition: color 0.5s linear;
}
h1 a:hover span {
    color: #fff;
    text-decoration: none;            
}