main navigation

css tools

css examples

online generators

Web Hosting

Looking for web hosting? Check out this web hosting directory.

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