Link card area that contains a button

Question

The grey area should be an <a> tag link. The black area is a <button> within the grey area. The button should have a onClick action.

When I click anything grey I want to access the <a> tag link. When I click the black area I want to trigger the button action. What is the proper and accessible way to achieve this?

Answer 1

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