链接在div的其他部分

Question

所以我在这里有一个按钮，但当我将鼠标悬停在下面的地方时，它不在按钮中，你可以点击链接我该如何解决这个问题

#box {
  width: 140px;
  height: 40px;
  background-color: rgba(255, 255, 255, 0.15);
  text-align: center;
  line-height: 40px;
  font-family: arial;
  font-size: 14px;
  position: relative;
  left: 560px;
  bottom: 55px;
}
a:link {
  text-decoration: none;
  color: white;
}
a:visited {
  color: white;
}

<a href="#">
  <div id="Box">Back to safety</div>
</a>