<div class="box">
  <p>グレーのボックス自体がリンクになっています。</p>
  <p class="btn">ここをクリック</p>
  <a href="#"></a>
</div>
.box{
  position:relative;
  padding:20px;
  width:400px;
  background:#ededed;
}

.btn{
  padding:10px 20px;
  display:inline-block;
  color:#fff;
  background:red;
}

a{
  position:absolute;
  top:0;
  left:0;
  height:100%;
  width:100%;
}

a:hover{
  background:#fff;
  opacity:0.3;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.