Style link

April 29th, 2011 | Posted by admin | 1 Comment

A hyperlink is a reference to a particular page or a document. by clicking the link we will be redirected to that page. Using the <a> tag we set links ( example: <a href = “http://www.google.com”> google </a>). In this post we will learn a glitter effect style link. Where style will be applied when we mouse over the link.

text_links


It has only one file and a gif image


1.style_link.html
2.style_link_bg.gif

style_link.html looks like the following,
Here for all the mouse over of link(link tag <a> hover, a:hover), we have applied a glitter effect background gif image. Simply by changing the image we get different effects.

</a>
<a><html>
<head>
<style type="text/css">
a:hover{background:url('style_link_bg.gif');}
a {text-decoration: none; color:#00A1C9; }
p {width:600px; border: 1px solid #000; margin: 75px auto 0; height:400px; padding:20px; text-align: justify; }
</style>
</head>
<body>
<p>
Mauris consectetur tellus at eros vulputate dignissim. Nunc fringilla, libero in semper tempor,
<a href="http://demo.smartnetzone.com" target="_blank">Stylish Link with glitter effect</a> lorem ante faucibus risus, nisl libero
<a href="http://demo.smartnetzone.com" target="_blank"> tempus turpis </a> eu auctor dui nunc sit amet venenatis pharetra urna.
Aenean faucibus porta magna sed volutpat.
</p>
</body>
</html></a>
<a>

Posted in : Html & Css, Tutorials


1 Comment to “Style link”

Add Comments (+)

  1. ZAinal says:
    May 1, 2011 at 2:05 pm

    Salam..

    thanks for the idea..