[英]Clickable area in buttons with CSS
I am looking at this example: http://codepen.io/benague/pen/bCkyr 我正在看这个例子: 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;
}
When you click these buttons at the very top, it doesn't really grab the link, but they still get animated. 当您单击最顶部的这些按钮时,它并没有真正抓住链接,但它们仍会显示动画。
How can I increase the clickable area so that whenever it animates, it actually goes to the URL? 如何增加可点击区域,以便每当它带有动画效果时,它实际上都会进入URL?
Thank you. 谢谢。
Add this to your css: 将此添加到您的CSS:
#buttons a {
-webkit-transform: scaleY(1) translateZ(-1px);
}
CodePen: http://codepen.io/anon/pen/EyYmvJ CodePen: http ://codepen.io/anon/pen/EyYmvJ
Reason for the link not fully clickable could be because the transform property on your active buttons kind of moved the anchor link a bit. 链接无法完全单击的原因可能是因为活动按钮上的transform属性有点移动了锚链接。
The issue here: Clickable link area unexpectedly smaller after CSS transform is simlar to yours so check out the correct answer there to get a better explanation regarding the transform property affecting the position of the anchor link and also regarding the fix. 这里的问题是: CSS转换后,可单击链接区域出乎意料地变小,因此与您的模拟转换类似,因此请在此处检查正确答案,以获取有关影响锚点位置的转换属性以及修正的更好说明。
For me it is working properly. 对我来说,它工作正常。 But if I understand you right you want to remove the padding of the link. 但是,如果我理解的正确,那么您想删除链接的填充。 You could use to remove the padding: 15px 25px;
您可以用来删除padding: 15px 25px;
from .btn
and work with 来自.btn
并与
a {
height: 60px;
width: 160px;
}
or something 或者其他的东西
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.