About

This is a simple tutorial on the different kind of CSS link effects that you can use on your website. Hope this will help you. Just follow the instructions given below.

Tutorial

Download this file. Its called Link.HTC there is no need to open it, just save this file. Now open your layout's css file. You must have defined the link style in it. Find those lines where you defined the link style.

a:link {color: #FFFFFF; text-decoration: none; border: 1px solid; }
a:visited {color: #FFFFFF;text-decoration: none; border: 1px solid; }
a:active {color: #FFFFFF;text-decoration: none; border: 1px solid;}
a:hover {color: #FFAA88;text-decoration: none; }


They should look something like that..thats just an example. Right above these lines..put this:



A{cursor:default;height:1px;behavior:url('link.htc');filter:progid:dximagetransform.microsoft.EFFECT(duration=1)}


So the whole thing looks like this now :
A{cursor:default;height:1px;behavior:url('link.htc');filter:progid:dximagetransform.microsoft.EFFECT(duration=1)}
a:link {color: #FFFFFF; text-decoration: none; border: 1px solid; }
a:visited {color: #FFFFFF;text-decoration: none; border: 1px solid; }
a:active {color: #FFFFFF;text-decoration: none; border: 1px solid;}
a:hover {color: #000000;text-decoration: none; }


Be sure to keep the link.htc file's path right. Now replace the word EFFECT with the real effects... which means the following words. You can change the duration if you want. I usually keep it lower than 1 by like .7 or .8 but its upto you. The effects are following.

Css link effects

For some of my layouts these link effects don't show up beacuse of different CSS file. So I made them on a different page. Click the link below to see the effects in a new window.

Link Effects



« Back