Link color transitioning with css 3

October 23, 2011

One of my new favourite tools is css3. I love how for the tech savvy I can add a level of detail and luxury to a web page with no fallback problems for lesser browsers.

One of my current favourites is color transitioning in css3 for such things as links.

If you give it a go i'm sure you'll agree with me, that it rules.

It's also really incredibly simple!

First of all we start with a regular href tag and a :hover state declaration.

a{  
   color:#000;  
}  
a:hover{color:#f00;} 

Then we add our css3 transition, first of all just for webkit browsers.

a{  
   color:#000;  
   -webkit-transition:color 1s ease-in;  
}  
a:hover{color:#f00;} 

Now we improve it by adding more extensive browser support.

a {  
   color:#000;  
   -webkit-transition:color 1s ease-in;  
   -moz-transition:color 1s ease-in;  
   -o-transition:color 1s ease-in;  
   transition:color 1s ease-in;  
}

And then you have it a simple transition from your main color to your hover state color. With no JS, jQuery or any other javascript libraries help.

Wicked, eh?


About me

Hello! I'm David Heward, how are you going? I'm a Senior Devops/Build Engineer, specialising in AWS & Cloud Automation. Based in London. Strong 10+ year background in Software development. Have a read of my blog. Have a look at some of my working projects. Contact me at @davehewy or on Linkedin.