How to create a square that redirects you in CSS-CodePudding

I have looked everywhere for an answer for this but to no avail, I want to create a button that is a square. When your mouse goes over any part of the square I need it to be clickable. I'm very new to CSS so an example would be nice, thank you.

CodePudding user response：

You can style the button like this.

.btn {
    border: 2px outset green;
    background-color: lightGreen;
    height:75px;
    width:75px;
    cursor:pointer;
    text-align: center;
    margin: 4px 2px;
}

.btn:hover {
   background-color: green;
   color:white;
}

And apply this style class to the button.

<button class= "btn" onclick="myFunction()"> Click Here </button>

CodePudding user response：

you can make button with tag <a> ... </a>, for example:

<a  href="www.facebook.com">Facebook</a>

and make the style:

.btn {border: 1px solid black; padding: 10px; text-decoration: none;}