Fading Link Colour With CSS3

CSS3 arms designers with some great new styling and effects. One of them is transitions and it lets us do something that previously required some jQuery or Javascript.

Previously, you may have used a jQuery script to fade your background images or graphic links. Now, with CSS3 you can use transitions and as long as you don’t mind a bit of progressive enhancement (designing ‘extra’ features for browsers that support the latest HTML5 and CSS3 standards), you can give your non-Internet Explorer audience a subtle treat!

If you look at the main navigation on this page – Home, About, Tutorials etc, and rollover the links you will see they fade from one colour to another. This is done using this code:

a:link, a:visited {
color: #66CD00;
text-decoration: none;
-moz-transition: all 0.2s linear;
-webkit-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
transition: all 0.2s linear;
a:hover, a:active {
color: #fff;

This will fade one colour in and out of the other on rollover/rollout.

Unfortunately, I can’t seem to get this working on gradient backgrounds as they are not supported yet it seems. I have tried using opacity on the container and animating that, but without luck.

other page

What do you think?

It's good to talk!

Your email address will not be published. Required fields are marked *