Link Effects

Main >> Content >> HTML >> Link Effects

Link opens in a new window:
<a target="_blank" href="URL">TEKST HER</a>

Remove underline:
<style type="text/css"> <!-- a:link{ text-decoration: none; color:"#000000" } a:visited{ text-decoration: none; color="#000000" } a:hover{ text-decoration: none; color="#000000" } --> </style>

Link goes backwards:
<style type='text/css'><!--a:hover{filter:fliph(color:black,strength=3);height:0px;width:inherit]//--></style>

Boxed links:
<style type="text/css"><!-- a:link {text-decoration: none; color:0099ff;} a:visited {text-decoration: none; color: 0099ff;} a:active {text-decoration: none; color:0099ff;} a:hover {color:#0099ff;text-decoration:none;border-top:1px solid;border-bottom:1px solid;border-left:1px solid;border-right:1px solid;}--></style>

Glowing links:
<style type="text/css"><!-- a:hover{filter:glow(color:#GLOW COLOR HERE, strength=3);height:0px;width:inherit} //--></style>

Blurred links:
<style type="text/css"> /* Blurred links from xanga.com/html_scripts */ a:hover {filter:blur(add="0",direction="80",strength="5"); height:0;}; </style>

Blurred links 2:
<style> a:hover, a:link, a:visited {filter:blur; .alpha {width: inherit; height: 1; filter: alpha (Opacity=100, FinishOpacity=20, Style=1, StartX=0, StartY=0, FinishX=580, FinishY=0);} </style>

Blurred links 3:
<style type="text/css"><!-- A:link {text-decoration: none; color:#A5E6EA;font-family:Arial;} A:visited {text-decoration: none;color: #A5E6EA;} A:active {text-decoration: none; color: #A5E6EA;} A:hover {color:#A5E6EA;text-decoration:none;letter-spacing:0px;height:0;filter:blur(add=1,phase=1,freq=2,strength=10,color=#A5E6EA}--></style>

Colored background:
<style type="text/css"><!-- a:link {TEXT-DECORATION:none} a:active {TEXT-DECORATION:none} a:visited {TEXT-DECORATION:none} a:hover {TEXT-DECORATION:none;cursor:crosshair; background color: ffccff} --></style>

Blinking stars:
<style type="text/css"> a.navbar:hover{color:silver; font-weight:bold;background-image:url(http://www.nackvision.com/myspace/links/twinklingstars2.gif);} a:hover, a.redlink:hover, a.navbar:hover {background-image:url(http://www.nackvision.com/myspace/links/twinklingstars2.gif); text-decoration:none; border:0px solid;} a:hover img {background-image:url(http://www.nackvision.com/myspace/links/twinklingstars2.gif); filter:alpha(finishopacity=0, style=2); } </style>

Letter spaced links:
<!-- begin code provided by createblog.com --> <style type="text/css"><!-- a:hover{letter-spacing:4px} //--></style> <!-- end code provided by createblog.com -->

Line through:
<style text="text/css"> <!--a:link{color:#FFFFFF;TEXT-DECORATION:none;} a:visited{color:#FFFFFF;TEXT-DECORATION:none;} a:active{color:#FFFFFF;TEXT-DECORATION:none;} a:hover{color:#339999; font-weigt: bold; cursor:e-resize ;TEXT-DECORATION:line-through; height:0;}--> </style>

Shaddow links:
<style type="text/css"><!-- a:hover{filter:dropshadow(color:#000000, strength=3);height:0px;width:inherit} //--></style>

Shaddow links 2:
<style TYPE="text/css"><!-- a:link {text-decoration: none; color:#000000; font-family:Arial; } a:visited {text-decoration: none; color: #000000; } a:active {text-decoration: none; color: #000000; } a:hover {color:pink; text-decoration:none; letter-spacing:0px; height:0; filter:shadow(color=pink)--> </style>

Up-side-down links:
<style type="text/css"><!-- a:hover{filter:flipv(color:#FF0000, strength=3);height:0px;width:inherit} //--></style>

Links go italic:
<style> a:hover{font-style:italic; } </style>

Turns to capital letters:
<style type="text/css"><!-- a:hover {text-transform:uppercase; } --> </style>

Dotted line around links:
<style type="text/css"><!-- a:link {text-decoration: none; color:FFCC33;} a:visited {text-decoration: none; color: FFCC33;} a:active {text-decoration: none; color:FFCC33;} a:hover {color:#FFCC33;text-decoration:dotted;border-top:1px dotted;border-bottom:1px dotted;border-left:1px dotted;border-right:1px dotted;}--></style>

Heart links:
<style type="text/css"> a.navbar:hover{color:red; font-weight:bold;background-image:url(http://www.nackvision.com/myspace/links/beating2xm.gif);} a:hover, a.redlink:hover, a.navbar:hover {background-image:url(http://www.nackvision.com/myspace/links/beating2xm.gif); text-decoration:none; border:0px solid;} a:hover img {background-image:url(http://www.nackvision.com/myspace/links/beating2xm.gif); filter:alpha(finishopacity=0, style=2); } </style>

Links go bold:
<style> a:hover{font-weight:bold; } </style>

lowercase links:
<style type="text/css"><!-- a:hover {text-transform:lowercase;} --></style>

Opacity:
<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: #000000; text-decoration:none;height:0;filter:alpha(opacity=25)-->></style>

Background picture:
<style type="text/css"><!-- a:hover {background:url(PIC URL HERE); text-decoration: none;} //--></style>

Gradient background:
<style type="text/css"><!-- a:hover {filter:progid:dximagetransform.microsoft.gradient(gradienttype=1,startcolorstr=#000000,endcolorstr=#ffcccc); blur(add="40",direction="90",strength="0"); border:#ffffff 1px solid; height: 1;} --></style>

Two colored frame links:
<style type="text/css"><!-- a:hover{border:green 1px inset} //--></style>

Lines on the side:
<style type="text/css"><!--a:link color: #9797B0;text-decoration:none;}a:visited{color: #9797B0;text-decoration:none;}a:active{color: #9797B0;text-decoration:none;}a:hover{color: #9797B0;text-decoration:none;border-left:solid 1px;border-right:solid 1px;} --></style>

Close together links:
<style type="text/css"><!-- a:hover{letter-spacing:-2px} //--></style>

All links turn small fonts:
<style>a:link, .footernav.link, a.footernav:link, a.footernav:active { font:normal 7px small fonts; background-color:none; color:#000000; line-height:16px; letter-spacing:0px; text-transform:none; text-decoration:none; border-top:0px solid;border-bottom:0px solid;border-left:0px solid;border-right:0px solid;} a:visited, a.footernav:visited, { font:normal 7px small fonts; background-color:none; color:#000000; line-height:16px; letter-spacing: 0px; text-transform:none; text-decoration:none; border-top:0px solid;border-bottom:0px solid;border-left:0px solid;border-right:0px solid;} a:hover { background-color:none; text-transform:none;} </style>

Small fonts with frame:
<style>a:link, .footernav.link, a.footernav:link, a.footernav:active { font:normal 7px small fonts; background-color:#D1E6F9; color:#000000; line-height:16px; letter-spacing:0px; text-transform:none; text-decoration:none; border-top:1px solid;border-bottom:1px solid;border-left:1px solid;border-right:1px solid;} a:visited, a.footernav:visited, { font:normal 7px small fonts; background-color:#D1E6F9; color:#000000; line-height:16px; letter-spacing: 0px; text-transform:none; text-decoration:none; border-top:1px solid;border-bottom:1px solid;border-left:1px solid;border-right:1px solid;} a:hover { background-color:#7D7C78; text-transform:none;} </style>

Use the code under to change the colours on your links, if they turn purple or blue, this code will change it!

Choose colors on the links:
<style type="text/css"> a:link {color: #000000;} a:visited {color: #000000;} a:hover {color: #000000;} a:active {color: #000000;} </style>