Create a HyperLink Button in CSS

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:
 
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:
  1. <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
 
  1. <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:
  1. <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:
  1. <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
  1. <html>  
  2.   
  3.     <body>  
  4.         <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'">  
  5.             Google</p>  
  6.     </body>  
  7.   
  8. </html>