Html 在CSS转换完成之前，如何使按钮不可点击？

我正在用简单的CSS和HTML设计一个网站，我试图实现一个与此类似的转换：

我的问题是在移动设备上：链接按钮（链接和搜索）在变为可见之前是可点击的，因为转换只是使它们不透明

我尝试过用display:none、pointer event:none或visibility:hidden设置按钮的样式，然后使它们仅在框处于：活动或：悬停状态时才可单击；然而，这并不能解决我的问题

虽然我知道用Javascript可以很容易地解决这个问题，但有没有办法只用HTML和CSS来解决这个问题（可能是通过重新构造/重新思考我的转换）？谢谢

---

如果您试图不使用js，那么您可能必须使用某种css控制的面纱

如果您可以让一个元素位于按钮上方（所有可点击区域，甚至可能是

比例（1.1）

），那么您可以在其他转换完成时将其设置为“揭开”。您可能可以通过css动画来实现这一点，尽管我现在无法再次检查

一般来说，我个人会三思而后行，积极阻止用户因为动画而点击CTA。当用户认为自己已经点击了某个网站，而不得不再次点击按钮时，这无疑会让用户对该网站失去兴趣

如果你需要更多的继续，或者它不起作用，那么请随意评论，并尝试回来更新我的答案

---

希望这能有所帮助。

我想出来了；我只需要在更改可见性时添加延迟，使用CSS转换（与实际转换效果的持续时间相同）

<div class="portfolio-item portfolio-effect__item portfolio-item--eff1">
      <img class="portfolio-item__image" src=".." alt="Portfolio Item">
      <div class="portfolio-item__info">
         <div class="portfolio-item__links">
          ...
         </div>
      </div>
</div>

.portfolio-item--eff1 .portfolio-item__info {
      -webkit-transform: scale(1.1);
      transform: scale(1.1);
      opacity: 0;
}
.portfolio-item--eff1:hover .portfolio-item__info {
      transition-property: all;
      transition-duration: 0.4s;
      transition-timing-function: linear;
      transition-delay: 0s;
      -webkit-transform: scale(1);
      transform: scale(1);
      opacity: 1;
}

.portfolio-item--eff1:hover .portfolio-item__links {
  visibility: visible;
  transition: visibility 0ms 0.3s;
}
.portfolio-item__links{
  visibility: hidden;
}