CSS 按钮 - 仅在文本上链接，而不在按钮上链接

Question

我正在制作一个 CSS 按钮作为小部件。 href 链接仅在悬停/单击“调用我们”文本时适用，如何让它显示在整个按钮上？

HTML:

<div class="mybutton"><a href="http://example.com">Call Us</a></div>

CSS:

.mybutton {
  width: 200px;
  height: 80px;
  background-color: #214b83;
  color: #fff;
  text-align: center;
}

Answer 1

a 元素默认有 display:inline 所以你可以给 display:block; 然后给 height:100% ; 和 width:100%;。要使文本居中，您需要提供 line-height:80px;(height of parent)。

.mybutton {
  width: 200px;
  height: 80px;
  background-color: #214b83;
  color: #fff;
  text-align: center;
}
.mybutton a {
  display: block;
  width: 100%;
  height: 100%;
  background: red;
  line-height: 80px;
}

<div class="mybutton"><a href="http://example.com">Call Us</a>
</div>