Making clickable div - html

Question

I want to make clickable div. Currently, it is only working when I click the red rectangle. How can I make the entire div clickable?
HTML
<div class="button">
<a href="#">
<p class="instagram-button">
<i class="fab fa-instagram"></i>
<span>Instagram Page</span>
</p>
</a>
</div>
CSS
.button {
background-color: transparent;
cursor: pointer;
border: 2px solid #737373;
margin: 20px auto 0;
display: flex;
align-items: center;
justify-content: center;
width: 200px;
height: 40px;
}
.button span {
font-size: 14px;
color: #737373;
text-transform: uppercase;
}
.fab {
color: #737373;
padding-right: 5px;
}

Answer 1

Make your <a> tag display:block and 100% height & width so the <a> tag has the same size your <div> tag

Answer 2

function redirect(){
window.location = "yourWebsite";
}
.button {
background-color: transparent;
cursor: pointer;
border: 2px solid #737373;
margin: 20px auto 0;
display: flex;
align-items: center;
justify-content: center;
width: 200px;
height: 40px;
}
.button span {
font-size: 14px;
color: #737373;
text-transform: uppercase;
}
.fab {
color: #737373;
padding-right: 5px;
}
<div onclick='redirect()' class="button">
<a href="#">
<p class="instagram-button">
<i class="fab fa-instagram"></i>
<span>Instagram Page</span>
</p>
</a>
</div>
Simple. Just redirect with the whole 'division' instead of just the 'anchor'.
(yes. it is supposed to throw a 404 error, I set window.location to 'yourWebsite' which is invalid.)
Suggestion: To make your anchor look more like a button, remove that underline from it with text-descoration: none.

Answer 3

If you can use JQuery, do
$(".button").click(function (){window.location.href="/wherever/you/wish/to/go"})
also, what's wrong with an onclick attribute?

Answer 4

Simply add an event listener to the button .div and assign a function to the event that redirects the window to a new location.