Create a HyperLink Button in CSS

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="'underline';'Blue';'hand'" onclick="location.href=''">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="'underline';'Blue';'hand'" onmouseout="'none';'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="'underline';'Blue';'hand'" onmouseout="'none';'Black'" onclick="location.href=''">Google</p>


Complete Code



            <p onmouseover="'underline';'Blue';'hand'"

                onmouseout="'none';'Black'" onclick="location.href=''">





Up Next
    Ebook Download
    View all
    View all