How to Create Shadow Effect on Links

Playing around with CSS (Cascading Sylesheet) seems never get me bored. Just like on this blog, I have modified so many styles from it's default style like adding loggo, stylish fade out effect on links, self customized email subscription, resizing body style and division and more. But I'll explain that later. For now, I'll give You a simple way to add shadow effect on links.

There's just a little code to be added to create shadow effect on links, the code is "text-shadow:2px 2px 2px #FF5F00". This shadow effect can be applied in every kind of links, whether inside posts, h1, h2, etc, including the link - state like active, hover (on rollover) or visited. And not just link, shadow can be applied for line border or background of an image or blockquote, see it on Shadow and Round Border with Simple CSS. For now, a specific example I'll give you Shadow effect on hovered links. Now please open your CSS file then add this code ("text-shadow:2px 2px 2px #FF5F00") or replace the old style of your CSS, and put it this way:

Before      a :hover{color:#FF5F00;}
After =>         a :hover{color:#FF5F00; text-shadow:2px 2px 2px #FF5F00;}

Easy cake, wasn't it? After adding the code the hovered link or whenever the mouse hover the link now will have a shadowed effect behind it. Note: this number 2px 2px 2px indicate the value of shadow size and it's position, while #FF5F00 is the shadow color. You may change those value and adjust it to your favorite style so it can match your own theme/ template.

Share