Google
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; }

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.