htmlのボタンにリンクを張る

Question

前提・実現したいこと

Bootstrap4を入れたHTMLのボタンにリンクを張りたいです。

発生している問題・エラーメッセージ

ボタンにリンクを張るには<button></button>を<a></a>タグで囲えば出来たと思うのですが、そうするとボタンの位置が変わってしまい「文章」の上(要素の最上部)に詰めて配置されてしまいます。
Chromeの検証モードを使ってもどこが悪さしているのかイマイチ分かりませんので、分かる方がいらっしゃれば教えて欲しいです、

該当のソースコード

<div class="col">
　　<figure class="imghvr-fade">
　　　　<div class="gr-img"> <img src="img/img.jpg" alt="タイトルイメージ"> </div>
　　　　<div class="gr-nam"> タイトル </div>
　　　　<figcaption>
           <div class="gr-int"> 文章</div>
           <div class="btn-cen">
             <button type="button" class="btn btn-outline-secondary">ボタン</button>
           </div>
       </figcaption>
     </figure>
</div>

.btn-cen {
  text-align: center;
}

.gr-int {
    font-size: 1rem;
    margin: 0.5rem 0;
    text-indent: 1em;
}

試したこと

総当りでタグやクラスを消したりしてみましたが上手くいきません。

補足情報

Imagehover.css
Bootstrap 4.1.3

Answer 1

Imagehover.css の以下の部分が悪影響を及ぼしています。

[class^='imghvr-'] a,
[class*=' imghvr-'] a {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
}

したがって、これを書けば解決します。

.imghvr-fade figcaption a {
  position: static;
}

ちなみに、これはドキュメント
http://www.imagehover.io/docs
にある Adding a Link に対応したものと考えられますが、figcaption 要素は figure 要素の最初か最後の子要素でなければならないので妥当ではありません。
https://developer.mozilla.org/ja/docs/Web/HTML/Element/figure

Answer 2

Bootstrapでしたら
aタグにbuttonにつけているタグをそのままつければ良いのでは。

           <div class="btn-cen">
             <button type="button" class="btn btn-outline-secondary">ボタン</button>
           </div>

↓

           <div class="btn-cen">
             <a class="btn btn-outline-secondary" href="hoge.html">ボタン</a>
           </div>