What about

<style>
    .wrapper{
      position: relative;
    }
    
    a{
      display: block;
      width: 300px;
      height: 150px;
      background-color: lightgray;
      border-radius: 1rem;
    }
    
    button{
      position: absolute;
      bottom: .5rem;
      left: .5rem;
      padding: .5rem;
      background-color: black;
      border-radius: .5rem;
      color: white;
    }
</style>

<div class="wrapper">
   <a href="https://codepen.io/" target="_blank"></a>
   <button type="button" onclick="alert('Fired!')">Button</button>
</div>

See https://codepen.io/nubetonante/pen/PoQaOwO

You could do it with Javascript by the way @ChrisG said, with .stopPropagation() or .preventDefault().

Or if you want to do it with css only, then you could add a card-container, inside an a tag and a button like this:

<div class="container">
   <a href="#"></a>
   <button></button>
</div>

Then make the container position: relative; and the button position:absolute; to position it above the <a> tag. U also will need z-index to place it above.