Sample List

ボタンのクリック可能範囲をカード全体に広げたい

概要

カード内にサムネイルや見出し本文等情報があり、詳細へのリンクボタンがあるのですが、クリック可能な範囲はカード全体にしたい!なんてことはよくありますよね。
考えられる対応としてカード全体をaタグで囲むという手法が挙げられると思いますが、今回はあくまでボタンにaタグという状態でクリック可能範囲を広げるスタイルシートを紹介したいと思います。

HTML

<div class="cards">
  <div class="card">
    <div class="card__thumb">
      <img src="/sample/images/css008/yakiniku.jpg" alt="">
    </div>
    <h3 class="card__heading">
      焼き肉
    </h3>
    <p class="card__text">
      焼き肉ってなんでこんなにも美味しいのだろうか。
    </p>
    <a href="" class="card__link">
      美味しい理由
    </a>
  </div>
  ...
</div>

CSS

.card {
  position: relative;
}
.card__link::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  pointer-events: auto;
  content: "";
  background-color: transparent;
}

結果

焼き肉

焼き肉ってなんでこんなにも美味しいのだろうか。

美味しい理由

ラーメン

ラーメンってなんでこんなにも美味しいのだろうか。

美味しい理由

お寿司

お寿司ってなんでこんなにも美味しいのだろうか。

美味しい理由

「美味しい理由」と書かれた青背景の部分がボタンでaタグなのですが、クリック範囲はカード全体になっていることが確認できると思います!

一覧に戻る