<ul class="card">
    <li class="card__container">
      <div class="card__box">
        <p>内容</p>
        <a href="#" class="card__link">
          リンクボタン
        </a>
      </div>
    </li>
    <li class="card__container">
      <div class="card__box">
        <p>内容</p>
        <a href="#" class="card__link">
          リンクボタン
        </a>
      </div>
    </li>
</ul>
ul,li {
    margin: 0;
    padding: 0;  
}

li {
    list-style-type: none;
}

.card {
    margin-top: 50px;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 40px;
}

.card__container {
    border-radius: 20px;
    background: #fff;
    border: 1px solid #ccc;
    position: relative;
}

.card__box {
    margin: 0;
    padding: 5px 10px;
}

.card__link::before {
    position: absolute;
    inset: 0;
    pointer-events: auto;
    content: "";
}

.card__link:hover {
  text-decoration: none;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.