html - 如何在CSS中为按钮创建缩放效果？

Question

我尝试创建一个按钮，其::after 在单击时会缩放。我试了又试但做不到。我认为这种效果只能通过 CSS 实现。所以请帮助。 请帮我创建这个按钮作为 gif:

喜欢:

#button::after:active{
   transform: scale(2);
}

或类似的东西!

Answer 1

您可以使用 :before 伪元素在按钮下创建另一个矩形，并使用 transform 在点击时缩放它。您可以使用 click 事件代替 css :active 状态。单击元素后，您需要单击其他元素以移除事件状态并在单击时再次查看效果。

button {
  padding: 10px 25px;
  background: red;
  color: white;
  margin: 50px;
  border: none;
  position: relative;
  outline: none;
}
button:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background: black;
  z-index: -1;
}
button:focus:before {
  transform: scale(2);
  transition: all 0.4s linear;
  opacity: 0;
}

<button>Click</button>