Introduction
In this article we discuss how to easily create a Hyperlink with the help of CSS, that looks exactly like our Hyperlink or <a> tag in HTML like this:
When we hover our mouse over it then the output will be:
Now we will write the code for this.
Step 1
First we will use a <p> tag:
Step 2
Now we want that when we hover our mouse over it, its color must be Blue and its Text Decoration will be Underline and our mouse cursor will convert to a Hand like this:
Step 3
Now we want that when the mouse leaves it, it will retutn to its original state. For this we will write the following code in the onmouseout Event:
Step 4
Now we want to Redirect it to a particular page, for this we will write the following code in the onclick event:
Complete Code


- <p>Google</p>

- <p onmouseover="this.style.textDecoration='underline';this.style.color='Blue';this.style.cursor='hand'" onclick="location.href='http://www.google.com'">Google</p>
- <p onmouseover="this.style.textDecoration='underline';this.style.color='Blue';this.style.cursor='hand'" onmouseout="this.style.textDecoration='none';this.style.color='Black'" >Google</p>
- <p onmouseover="this.style.textDecoration='underline';this.style.color='Blue';this.style.cursor='hand'" onmouseout="this.style.textDecoration='none';this.style.color='Black'" onclick="location.href='http://www.google.com'">Google</p>

- <html>
- <body>
- <p onmouseover="this.style.textDecoration='underline';this.style.color='Blue';this.style.cursor='hand'" onmouseout="this.style.textDecoration='none';this.style.color='Black'" onclick="location.href='http://www.google.com'">
- Google</p>
- </body>
- </html>

Mukesh Kumar TiwariPosted Mar 27, 2014, 6:29 AM
Nice one.....
Ravikumar GPosted Apr 24, 2013, 4:57 AM
Simple and Cute...
Sachin KumarPosted Apr 24, 2013, 12:55 AM
Good....because use full for me...Thank u