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

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;
}

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

我怎样才能增加可点击区域，以便在动画播放时实际转到 URL？

谢谢。

Answer 1

将此添加到您的 CSS:

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

代码笔: http://codepen.io/anon/pen/EyYmvJ

---

链接无法完全点击的原因可能是因为您的事件按钮上的转换属性稍微移动了 anchor 链接。

---

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