Question

我正在看这个例子：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;
}

当你点击最顶部的这些按钮时，它并没有真正抓住链接，但它们仍然会被动画化。

如何增加可点击区域，以便无论何时动画，它实际上都会转到网址？

谢谢。

Answer 1

将此添加到您的css：

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

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

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

这里的问题：Clickable link area unexpectedly smaller after CSS transform与你的相似，所以请查看正确答案，以便更好地解释影响锚链接位置的转换属性以及修复方法。

Answer 2

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

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

或其他什么

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

2 个答案: