带有 CSS 的按钮中的可点击区域答案

【问题标题】：Clickable area in buttons with CSS带有 CSS 的按钮中的可点击区域
【发布时间】：2016-05-25 17:35:09
【问题描述】：

我在看这个例子：http://codepen.io/benague/pen/bCkyr

.btn {
  border-radius: 5px;
  padding: 15px 25px;
  font-size: 22px;
  text-decoration: none;
  margin: 20px;
  color: #fff;
  position: relative;
  display: inline-block;
}

当您单击最顶部的这些按钮时，它并没有真正抓住链接，但它们仍然会产生动画。

我怎样才能增加可点击区域，以便每当它动画时，它实际上会转到 URL？

谢谢。

【问题讨论】：

无法在 FF 中重现问题

标签： html css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

将此添加到您的 CSS：

#buttons a {
  -webkit-transform: scaleY(1) translateZ(-1px);
}

CodePen： http://codepen.io/anon/pen/EyYmvJ

链接无法完全点击的原因可能是活动按钮上的 transform 属性 有点移动了锚链接。

这里的问题：Clickable link area unexpectedly smaller after CSS transform 与您的问题相似，因此请查看那里的正确答案以获得关于影响锚链接位置的变换属性以及修复的更好解释。

【讨论】：

解决了这个问题。但是原始示例中的可爱动画（可点击按钮）消失了：（它看起来不再像按下按钮了。

【解决方案2】：

对我来说它工作正常。但是，如果我理解正确，您想删除链接的填充。您可以使用从.btn 中删除padding: 15px 25px; 并使用

a {
 height: 60px;
 width: 160px;
}

什么的

【讨论】：

嗯，不是这样。如果您单击按钮的最顶部，它会像您单击一样动画，但并没有真正转到链接。