【CSS】ボタンのhover時、下のコンテンツまで動いちゃうときの解決法

ボタンを作ったものの、ホバー時にしたのコンテンツまでずれる

ボタンにCSSでhoverアニメーションをつけるのも当たり前になってきました。
よく見かけるのが立体感のある押し込み式ボタン。
ボタンの「押せる感」があり、コンバージョンエリアなどに多用されるスタイルです。
私もよく実装スタイルですが、何度かドツボにはまるのがこの現象。

ホバーすると下まで動くボタン

わかりますか？　
ホバーしたときにしたのコンテンツまでずれて動いちゃうの。。
ちなみに書いたCSSはこれ。

  .btn_1 {
    display: inline-block;
    padding: 10px 15px;
    text-decoration: none;
    background: #0E6BA8;
    color: #FFF;
    border-bottom: solid 6px #001C55;
    border-radius: 2px;
  }
  .btn_1:hover {
    -webkit-transform: translateY(6px);
    transform: translateY(6px);
    border-bottom: none;
    color: #fff;
  }

ボタンの影をborderを使って再現しています。
hover時に影の分だけtranslateを使って動かす方法です。
しかしこれだとそれ以下のコンテンツまで動いてしまいました。

下のコンテンツがずれないCSSに変更してみた

色々調べて、下のコンテンツが動かない実装を発見。
それがこちら。

ホバーしても下が動かないボタン

  .btn_2 {
    display: inline-block;
    position: relative;
    padding: 10px 15px;
    text-decoration: none;
    background-color: #F2545B;
    border-radius: 2px;
    color: #fff;
    -webkit-transition: none;
    transition: none;
    box-shadow: 0 6px 0 #A4243B;
  }
  .btn_2:hover {
    top: 6px;
    box-shadow: none;
    color: #fff;
  }

borderではなくbox-shadowを使って立体感を出します。
これで下にあるコンテンツは動きません。