Css Tutorial [More Link Effects]

Since these below are faster to add to the other ones I figured I would add them all on one page with examples of course.

- First add this code to the HEAD of your page: (change #hex colors to your choice)

<style type="text/css">
<!--
A:link { text-decoration: none; color:#000000 }
A:visited { text-decoration: none; color:#000000 }
A:active { text-decoration: none; color:#000000 }
A:hover {color:#FF9900;text-decoration:none;height:1px;filter:progid:DXImageTransform.Microsoft.DropShadow(OffX=1, OffY=1,Color='#000000', Positive='true');}
-->
</style>




 

 

Now all you have to do is pick a style you like and replace what's in the box with the bold style you added to the HEAD of your page.

Engrave - Looks like engraved text.

Glow - Adds a nice little glow.

Blur - Blurs your text.

Drop Shadow - Creates a shadow.

Motion Blur - The link that appears to be in motion.

Motion Shadow - Shadow and motin blur in one.

To add one of these effects to a single link just do the following:

<a href="#" STYLE="filter:progid:DXImageTransform.Microsoft.MotionBlur(Strength=3, Direction=315, Add='true')">Test link</a>

That's just one of the above effects, change it to whatever you want. Just change what's in bold. Enjoy!

If you find this information inaccurate or have questions post in the forums