35 Link Styling And Link Hover Effects Using CSS

Image may be NSFW.
Clik here to view.

In one of the previous articles, we had seen how to create some cool link hover effects using CSS3. Here we shall see some tricks possible on text links using CSS plus CSS3.

Check out the demo in the dabblet I’ve created. The corresponding codes are available in the dabblet itself. You can view the HTML, CSS/CSS3 and the corresponding Results.

These tricks contain the most basic text styling codes as well as some advanced codes using CSS3. I’ve not included the trick using the background images on hover for some reason.

There are a total of 35 different text link styles with some cool looking hover effects.
Here are the codes which does the magic:

CSS codes in order of the demo:

.link-style a:link, a:visited, a:hover{color:Darkblue;}

.link-style li:nth-of-type(2) a { text-decoration: none;}

.link-style li:nth-of-type(3) a{ text-decoration: none;}
.link-style li:nth-of-type(3) a:hover { text-decoration: underline;}

.link-style li:nth-of-type(4) a{text-decoration:underline;}
.link-style li:nth-of-type(4) a:hover{text-decoration:none;}

.link-style li:nth-of-type(5) a{}
.link-style li:nth-of-type(5) a:hover{cursor:help;}

.link-style li:nth-of-type(6) a{text-decoration:none;}
.link-style li:nth-of-type(6) a:hover{text-decoration:overline;}

.link-style li:nth-of-type(7) a{}
.link-style li:nth-of-type(7) a:hover{color:#ee3930;}

.link-style li:nth-of-type(8) a{text-decoration:none;}
.link-style li:nth-of-type(8) a:hover{background:#000;color:#fff;}

.link-style li:nth-of-type(9) a{text-decoration:none;}
.link-style li:nth-of-type(9) a:hover{border-bottom:solid 1px #000;}

.link-style li:nth-of-type(10) a{border-bottom:dashed 1px;text-decoration:none;}
.link-style li:nth-of-type(10) a:hover{border-bottom:solid 1px #000;}

.link-style li:nth-of-type(11) a{text-decoration:overline underline;}

.link-style li:nth-of-type(12) a{text-decoration:none;}
.link-style li:nth-of-type(12) a:hover{text-decoration:overline underline;}

.link-style li:nth-of-type(13) a{text-decoration:none;}
.link-style li:nth-of-type(13) a:hover{text-decoration:none;color:#ee3930;}

.link-style li:nth-of-type(14) a{text-decoration:none;}
.link-style li:nth-of-type(14) a:hover{border-bottom:solid 1px;border-top:solid 1px;}

.link-style li:nth-of-type(15) a{text-decoration:none;}
.link-style li:nth-of-type(15) a:hover{border:dashed 1px;}

.link-style li:nth-of-type(16) a{text-decoration:none;}
.link-style li:nth-of-type(16) a:hover{-webkit-background-clip: text;
color: white;
-webkit-text-fill-color: transparent;
  background-image: -webkit-gradient(linear, left top, right top, from(#ea8711), to(#d96363));
background-image: -webkit-linear-gradient(left, #ea8711, #d96363, #73a6df, #9085fb, #52ca79);
background-image:    -moz-linear-gradient(left, #ea8711, #d96363, #73a6df, #9085fb, #52ca79);
background-image:     -ms-linear-gradient(left, #ea8711, #d96363, #73a6df, #9085fb, #52ca79);
background-image:      -o-linear-gradient(left, #ea8711, #d96363, #73a6df, #9085fb, #52ca79);}

.link-style li:nth-of-type(17) a{background-color:#efefef;text-decoration:none;}
.link-style li:nth-of-type(17) a:hover{text-decoration:none;background-color:red;color:#fff;}

.link-style li:nth-of-type(18) a { -webkit-transition: color .4s linear; -moz-transition: color .4s linear; -ms-transition: color .4s linear; -o-transition: color .4s linear; transition: color .4s linear; }
.link-style li:nth-of-type(18) a:hover { color: #e06c1f; }

.link-style li:nth-of-type(19) a{text-decoration:none;}
.link-style li:nth-of-type(19) a:hover{text-decoration:line-through;}

.link-style li:nth-of-type(20) a{text-decoration:none;}
.link-style li:nth-of-type(20) a:hover{font-style:bold;}

.link-style li:nth-of-type(21) a{text-decoration:none;}
.link-style li:nth-of-type(21) a:hover{font-style:italic;}

.link-style li:nth-of-type(22) a{text-decoration:none;}
.link-style li:nth-of-type(22) a:hover{font-variant: small-caps;}

.link-style li:nth-of-type(23) a{text-decoration:none;}
.link-style li:nth-of-type(23) a:hover{border-left:solid 1px;border-right:solid 1px;}

.link-style li:nth-of-type(24) a{text-decoration:none;}
.link-style li:nth-of-type(24) a:hover{border-bottom:dotted 1px;}

.link-style li:nth-of-type(25) a{text-decoration:none;}
.link-style li:nth-of-type(25) a:hover{border:grey 4px outset;text-decoration: none;}

.link-style li:nth-of-type(26) a{text-decoration:none;}
.link-style li:nth-of-type(26) a:hover{border:grey 4px inset;text-decoration: none;}

.link-style li:nth-of-type(27) a{border-style: solid;border-width : 1px 3px 3px 1px;text-decoration : none;}
.link-style li:nth-of-type(27) a:hover{border-color:green;text-decoration: none;}

.link-style li:nth-of-type(28) a{text-decoration:none;}
.link-style li:nth-of-type(28) a:hover{cursor:help;text-decoration: none;}

.link-style li:nth-of-type(29) a{text-decoration:none;}
.link-style li:nth-of-type(29) a:hover{text-shadow: 2px 2px 2px #444; text-decoration: none;}

.link-style li:nth-of-type(30) a { text-decoration: none; }
.link-style li:nth-of-type(30) a:hover:after { content: " (" attr(href) ") "; }

.link-style li:nth-of-type(31) a{text-decoration: none; border-radius: 10px; padding: 2px 5px 5px 5px; text-decoration:none;}
.link-style li:nth-of-type(31) a:hover{color:#fff;background:#e12000;text-decoration: none;}

.link-style li:nth-of-type(32) a{text-decoration: none; -webkit-transition: color .4s linear; -moz-transition: color .4s linear; -ms-transition: color .4s linear; -o-transition: color .4s linear; transition: color .4s linear; border-radius: 10px; padding: 2px 5px 5px 5px; text-decoration:none;}
.link-style li:nth-of-type(32) a:hover{color:#fff;background:#e12000;text-decoration: none;}

.link-style li:nth-of-type(33) a{text-decoration: none; -webkit-transition: color .4s linear; -moz-transition: color .4s linear; -ms-transition: color .4s linear; -o-transition: color .4s linear; transition: color .4s linear; border-radius: 10px; padding: 2px 5px 5px 5px; text-decoration:none;}
.link-style li:nth-of-type(33) a:hover{border-bottom:dotted #fff; color:#fff;background:#e12000;text-decoration: none;}

.link-style li:nth-of-type(34) a{text-decoration: none; -webkit-transition: color .4s linear; -moz-transition: color .4s linear; -ms-transition: color .4s linear; -o-transition: color .4s linear; transition: color .4s linear; border-radius: 10px; padding: 2px 5px 5px 5px; text-decoration:none;}
.link-style li:nth-of-type(34) a:hover{text-shadow: 2px 2px 2px #444;border-bottom:dotted #fff; color:#fff;background:#e12000;text-decoration: none;}

.link-style li:nth-of-type(35) a{text-decoration:none;}
.link-style li:nth-of-type(35) a:hover{background:url(http://2.bp.blogspot.com/-TTyBjn-mQgs/T7XulBXJD7I/AAAAAAAADZM/TUbJleQaSQQ/s200/absctract-patterns.jpg);text-decoration:none;}

Things used in the demonstrations:

1) Most of the CSS uses text-decoration:none;
This says that there are no possible decoration for that particular text link.
The possible text-decoration attributes are here.
text-decoration:blink; is not supported on most of the browsers.

2) The CSS3 attributes like border-radius , transitions, text-shadow, background-clip, gradients and other related CSS3 properties are not supported on older browsers and IEs.

3) cursor:help; is used to change the cursor type. All other cursor attributes of CSS are here.

4) The transition effects in Demo 18 doesn’t work again on Chrome, once clicked on the link.
This is a known bug.

5) Don’t use text-decoration:underline extensively because some letters are slightly brushed across. Eg is “g” and “s” they may look alike.

6) The Demo35 won’t work if you are not connected to the Internet, as the image is fetched from Google servers. Replace it with your own image URL.

Hope you liked these basic tutorial. Please report us if anything doesn’t work so that it can be fixed. I would like to thank Impressive Webs for showing me these tricks.
Enjoy trying the tricks on your website.

Image may be NSFW.
Clik here to view.