制作可点击的div

我想让点击div。目前，它仅在我单击红色矩形时才起作用。如何使整个div可点击？

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;
}