Go Backward Go to main page Send me an e-mail Go Forward
 
 Ami's Profile
 Manga and Anime
 Injustice to Ami
 The Original Mercury
 Past Love
 Mercury's Powers
 Ami's Pictures
 Why Ami

 Updates
 Credits
 FAQs
 Site History
 Awards Won
 Past Layouts
 Link WBB
 Exit Links
 WBB's Projects

 Poems
 Fanfictions
 Fanarts

 WBB's Polls
 BSSM Quiz
 Guessing Game
 Coloring Pictures
 Avatars
 Animated Gifs
 Awards For You

 Link Effect
 Creating Brushes
 TV Lines Effect
 Transparent Gifs
 Coloured Scrollbars
 Shaking Images
 Grey-Colour Rollover
 Password Protection

 
Tutorials » Link Effect

Want to change the color of your link or make each link have different effect? You can do that with CSS. CSS is like below.

<style type="text/css">

A:link
{ text-decoration: value; [underline, overline, underline overline, line-through, blink, none] color:#000000; }
A:visited
{ text-decoration: value; [underline, overline, underline overline, line-through, blink, none] color:#000000; }
A:active
{ text-decoration: value; [underline, overline, underline overline, line-through, blink, none] color:#000000; }
A:hover
{ text-decoration: value; [underline, overline, underline overline, line-through, blink, none] color:#000000;}

</style>

Just replace those in bolds to either underline, overline or to whatever colour that you want.

 

If you want a link effect where one link changes to blue color when you mouse moves over it and another to red color when your mouse moves over it, just type in these.

<style type="text/css">

A:link
{ text-decoration: value; [underline, overline, underline overline, line-through, blink, none] color:#000000; }
A:visited
{ text-decoration: value; [underline, overline, underline overline, line-through, blink, none] color:#000000; }
A:active
{ text-decoration: value; [underline, overline, underline overline, line-through, blink, none] color:#000000; }
A:hover
{ text-decoration: value; [underline, overline, underline overline, line-through, blink, none] color:#000000;}

A:link.menu1 [you can name menu1 to whatever name you want]
{ text-decoration: value; [underline, overline, underline overline, line-through, blink, none] color:#000000; }
A:visited.menu1
{ text-decoration: value; [underline, overline, underline overline, line-through, blink, none] color:#000000; }
A:active.menu1
{ text-decoration: value; [underline, overline, underline overline, line-through, blink, none] color:#000000; }
A:hover.menu1
{ text-decoration: value; [underline, overline, underline overline, line-through, blink, none] color:#000000;}

</style>

An example is below, just point your cursor on the words.

 

Home    Eat    Sleep    Wake    Run    Whatever

 

OK to get this result, you must put class="menu1" or whatever you have named it into the link tag <a href="URL">. An example is like below.

<a href="URL" class="menu1">

If you want three or more different effects just cut and paste the menu1 as many times as you want, but this time you must rename each of them to some other name and not menu1. Each of them must have a unique name. Do not forget to add in the fullstop sign before the name of the specific link-effect.



1