Links, Links, Links!! That’s what we have all over the internet. On our website and blog posts, we have a lot of links to point a user to another page. Today I will share a small trick to stylise the links with CSS3 Animation. That’s what I’ve used on this website and you can apply the same as well to change the link color with style on hover.

CSS3 Animation

With CSS3 animation, we can add some effects when changing from one style to another without using any flash or javascript. We will use CSS animation transition to add some cool effects on the anchor tags.

View Demo

How it works

CSS3 transition effects let an element gradually change from one style to another. To do this we must specify two things:

Specify the CSS property we want to add an effect to.
Specify the duration of the effect.
Optionally we can specify “transition-timing-function” which is set to “ease” by default however, we can use any of these linear|ease|ease-in|ease-out|ease-in-out
Now lets play with CSS3 Animation transition

HTML Code

CSS Code

Try this code on a blank HTML page and add the CSS either within ... tags or in your stylesheet. Play around a bit with the CSS to understand the CSS3 Animation transition and create some cool effects for your website links and other block level elements. Feel free to discuss this further in comments.