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:
![CSS1.jpg]()
When we hover our mouse over it then the output will be:
![CSS2.jpg]()
Now we will write the code for this.
Step 1
First we will use a <p> tag:
<p>Google</p>
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:
![CSS3.jpg]()
<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>
![CSS4.jpg]()
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>