Hyperlinks Code Examples
Below you will see what can be done with CSS and hyperlinks.
Note: Not all examples will work in all browsers.
'Standard Links - No Hover Effect'
Underline Removed
.l1 { text-decoration:none; }
.l2 { text-decoration:none; background-color:#99CCFF; }
Border - Dotted - No Underline
.l3 { border: 1px dotted #99CCFF; text-decoration:none; }
.l4 { color:#800000; }
.l5 { text-decoration:underline overline; }
.l6 { color:#993300; text-decoration:none; border-bottom: 1px dashed #993300; }
Colorful Underline (Color.jpg)
.l7 { text-decoration:none; background: url(color.jpg) repeat-x bottom left; }
'Links with Hover Effect'
.h1:hover { color:#800000; }
.h2 { text-decoration:none; } .h2:hover { text-decoration:underline; }
.h3:hover { background-color:#99CCFF; }
.h4:hover { text-transform:uppercase; }
.h5:hover { font-weight:bold; }
.h6:hover { text-decoration:overline; }
.h7 { color:#993300; text-decoration:none; border-bottom: 1px dashed #993300; } .h7:hover { border-bottom: 1px solid #993300; }
.h8 { text-decoration:none; color:#0066FF; } .h8:hover { background: url(animated.gif) repeat-x bottom left }
.h9:hover { text-decoration:blink; }
'Visited Links (Click to view effect)'
.v1:visited { text-decoration:line-through; }
.v2:visited { padding-right: 12px; background: url(tick.gif) no-repeat 100% 50%; }
.v3:visited { color: #008080; }
Blend Link
in with Text
.v4:visited { cursor:text; text-decoration:none; color: #333333; }
.v5:visited { background: url(bg.png) no-repeat; color: #333333; text-decoration:none; }
.v6:visited { border-left: 1px solid #333333; border-right : 1px solid #333333; color:#333333; text-decoration:none; }
If you have any other suggestions for hyperlinks, then please contact us and we will add them to this list.