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:
- <p onmouseover="this.style.textDecoration='underline';this.style.color='Blue';this.style.cursor='hand'" onclick="location.href='http://www.google.com'">Google</p>
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:
- <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>
Step 4
Now we want to Redirect it to a particular page, for this we will write the following code in the onclick event:
- <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>
Complete Code
- <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>