<div class="hotel_item">
  <a href="https://nanimonaikedo.jp" target="_blank" class="hotel_detail">
    <figure class="hotel_img"><img src="http://bit.ly/2Kzvg9E" alt=""></figure>
    <h2 class="hotel_name">hogehoge hotel</h2>
    <div class="hotel_txt">説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト</div>
    <div class="hotel_book"><span data-url="https://www.google.com/" class="hotel_btn-book js-url">予約する</span></div>
  </a>
</div>
body{
  background: #eee;
  line-height:1.6;
}
.hotel{
  &_item{
    margin:20px auto;
    background: #fff;
    border-radius: 10px;
    overflow:hidden;
    width: 250px;
    position: relative;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
  }
  &_detail{
    color: #333;
    text-decoration:none;
  }
  &_img{
    margin-bottom: 5px;
    img{
      width: 100%;
    }
  }
  &_name,
  &_txt,
  &_book{
    margin:0 20px; 
  }
  &_name{
    font-size: 20px;
  }
  &_txt{
    color: #8c8c8c;
    font-size: 12px;
    margin-bottom:10px;
  }
  &_book{
    display: block;
    overflow: hidden;
    margin-bottom: 25px;
  }
  &_btn-book{
    display: inline-block;
    padding:5px 10px;
    background: #3aae73;
    text-align: center;
    color: #fff;
    font-size: 12px;
    float: right;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
    position:relative;
    z-index:1;
  }
}
View Compiled
$('.js-url').on('click', function(e){
    let href=$(this).attr('data-url');
    window.open(href, "_blank");
    return false;//クリックによる、子要素から親要素への伝播をキャンセル
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js