如何让HTML和CSS按钮的整个区域可点击，而非仅文本区域？

我有一个用于跳转至指定页面的按钮，仅点击按钮内的文本时才会触发跳转，点击按钮其他区域无响应。此前该按钮可实现全区域点击跳转，仅修改了颜色、边距等CSS属性后出现此问题，当前使用的CSS和HTML代码如下：

现有代码 #

CSS #

.btn {
  display: inline-block;
  cursor: pointer;
  border-radius: 10px;
  overflow: hidden;
  background-color: black;
  font-size: 1.19rem;
  text-align: center;
  padding: 12px 24px;
  margin-left: 45vw;
  margin-right: 45vw;
  border: 3px solid black;
  outline: 3px solid black;
}

HTML #

<div class="btn">
  <a href="<insert-url-here>">Text Here</a>
</div>

问题根源是**<a>跳转标签仅占据自身文本区域，没有铺满父容器.btn的全部空间**，点击按钮空白处实际触发的是外层<div>而非链接。以下两种方法均可解决：

方法一：让<a>铺满父容器 #

给.btn内部的<a>标签添加样式，使其占据按钮的整个可点击区域：

.btn {
  display: inline-block;
  cursor: pointer;
  border-radius: 10px;
  overflow: hidden;
  background-color: black;
  font-size: 1.19rem;
  text-align: center;
  padding: 12px 24px;
  margin-left: 45vw;
  margin-right: 45vw;
  border: 3px solid black;
  outline: 3px solid black;
}

/* 新增样式 */
.btn a {
  display: block;
  width: 100%;
  height: 100%;
  color: white; /* 可选：让文字与黑色背景区分开 */
  text-decoration: none; /* 可选：去掉链接默认下划线 */
}

HTML无需修改，保持原结构即可。

方法二：直接将<a>作为按钮容器 #

去掉多余的外层<div>，直接给<a>标签应用.btn类，让按钮本身就是可跳转的链接，结构更简洁：

.btn {
  display: inline-block;
  cursor: pointer;
  border-radius: 10px;
  overflow: hidden;
  background-color: black;
  font-size: 1.19rem;
  text-align: center;
  padding: 12px 24px;
  margin-left: 45vw;
  margin-right: 45vw;
  border: 3px solid black;
  outline: 3px solid black;
  color: white; /* 文字颜色 */
  text-decoration: none; /* 去掉链接下划线 */
}

修改后的HTML：

<a href="<insert-url-here>" class="btn">Text Here</a>

内容的提问来源于stack exchange，提问作者Romit