はじめに

（イメージでいうと、Gmailの受信メール一覧のページで☆マークをクリックしてもジャンプしない、みたいな感じです）

普通にaタグの入れ子でボタンを配置してみましたが、それだとボタンをクリックしたらリンクも有効になってしまいます。

それを何とかならないかと、ちょっと考えてみました。

（先に言っておくと、「z-indexでボタンを上に配置する方法」ではダメでした）

ボタン部分をaタグの入れ子にした場合、やってみた限りではどの方法を用いてもリンクが勝ってしまいます。

最終的には以下のようにボタンクリックしてもジャンプしなくなりました。

仕上がりイメージ

枠全体がリンク領域になっていますが、ボタン部分はリンク領域外になっているので、ボタンをクリックしてもリンクされません

リンク領域内をクリックするとトップページにジャンプしますので、ブラウザの戻る機能等で戻ってみてください。

全体を覆えば上手くいった

先に結論を書いた上に何のことかよく分からないかもしれませんが、リンクタグとボタンの親にdivを作って、その兄弟としてリンクとボタンを配置したら上手くいきました。

兄弟にするとボタンがリンクの外に出てしまうので、positon:absoluteでリンク枠の中に入るように位置を調整させました。

HTML

<div class="test_wrapper">
  <a href="#" class="test">この枠全体がリンク領域</a>
  <input id="test_btn01" type="checkbox" class="test_checkbox">
  <label for="test_btn01" class="test_btn">ボタン</label>
</div>

CSS

.test_wrapper { /*全体を覆う枠*/
 position: relative;
 width: 100%;
 height: 100px;
 border: 1px solid #ccc;
 box-sizing:border-box;
}
.test { /*リンク用のclass*/
 display: flex;
 align-items: center;
 justify-content: center;
 width: 100%;
 height: 100%;
 background: #eee;
 text-decoration: none;
 color: #444;
}
.test:hover { /*リンクをhoverした時の背景色の変更*/
 background: #f5f5f5;
}
.test_checkbox { /*チェックボックスの非表示化*/
 display: none;
}
.test_btn { /*ボタン部分のclass*/
 position: absolute;
 top: 50%;
 transform: translateY(-50%);
 right: 20px;
 display: flex;
 align-items: center;
 justify-content: center;
 width: 50px;
 height: 50px;
 background: #338DC9;
 color: #fff;
 text-decoration: none;
 border: 0;
 border-radius: 50%;
 cursor: pointer;
 text-align: center;
 user-select: none;
}
.test_checkbox:checked+.test_btn { /*ボタンクリック時の背景色変更*/
 background: #999;
}

CSSがちょっと長いですが、ポイントとして以下のような流れです。

これで、ボタンをaタグの入れ子にせずに、リンク枠内に配置する事ができます。

できあがったもの