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
Background Color
Border - Dotted - No Underline
Change of Color
Underline & Overline
Dashed Underline
Colorful Underline (Color.jpg)
Underline on Hover
Change Background
Change to Uppercase
Change to Bold
Hover with Overline
Dashed Underline to Solid
Animated Hover (Animated.gif)
Blink on Hover
Visited Link Ticked
Change Color
Blend Link in with Text
Background Image
Side Lines
Underline Removed
.l1 { text-decoration:none; }
Background Color
.l2 { text-decoration:none; background-color:#99CCFF; }
Border - Dotted - No Underline
.l3 { border: 1px dotted #99CCFF; text-decoration:none; }
Change of Color
.l4 { color:#800000; }
Underline & Overline
.l5 { text-decoration:underline overline; }
Dashed Underline
.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'
Change Color on Hover
.h1:hover { color:#800000; }
Underline on Hover
.h2 { text-decoration:none; }
.h2:hover { text-decoration:underline; }
Change Background
.h3:hover { background-color:#99CCFF; }
Change to Uppercase
.h4:hover { text-transform:uppercase; }
Change to Bold
.h5:hover { font-weight:bold; }
Hover with Overline
.h6:hover { text-decoration:overline; }
Dashed Underline to Solid
.h7 { color:#993300; text-decoration:none; border-bottom: 1px dashed #993300; }
.h7:hover { border-bottom: 1px solid #993300; }
Animated Hover (Animated.gif)
.h8 { text-decoration:none; color:#0066FF; }
.h8:hover { background: url(animated.gif) repeat-x bottom left }
Blink on Hover
.h9:hover { text-decoration:blink; }
'Visited Links (Click to view effect)'
Line Through Link
.v1:visited { text-decoration:line-through; }
Visited Link Ticked
.v2:visited { padding-right: 12px; background: url(tick.gif) no-repeat 100% 50%; }
Change Color
.v3:visited { color: #008080; }
Blend Link in with Text
.v4:visited { cursor:text; text-decoration:none; color: #333333; }
Background Image
.v5:visited { background: url(bg.png) no-repeat; color: #333333; text-decoration:none; }
Side Lines
.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.



