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

Question

我尝试创建一个按钮，其中:: after在点击时缩放。我试过但尝试过但不能。我认为这种效果只能通过CSS实现。所以请帮忙。 请帮我创建这个按钮，如gif：

像：

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

或类似的东西！

Answer 1

试试这个

HTML

<button class="scale-btn">Text</button>

CSS

    .scale-btn{
  padding:6px 12px;
  border:none;
  background-color: #212121;
  color:#fff;
  font-size:20px;
  position: relative;
  opacity: 1;
}
.scale-btn::after{
  content:"";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin:auto;
  transform:scale(1);
  background-color: rgba(0,0,0,0.8);
  opacity:1;
  transition:all ease 0.5s;
  z-index:-1;
}
.scale-btn:hover::after{
  animation:grow 0.5s ease;
}

@keyframes grow
{
  0%{
    transform:scale(1);
    opacity:1;
  }
  100%{
    transform:scale(1.2);
    opacity:0;
  }
}

相应的风格

Link for reference

Answer 2

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

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>

Answer 3

为什么你需要它：之后？

.button {
  margin: 2em;
}

.button:hover {
  transform: scale(2);
}

<button class="button">Button</button>