html - 悬停效果不会调整我的按钮

Question

我试图像这样启动相同的效果:

如您所见，当鼠标悬停在按钮上时，按钮具有这种缩放和淡化白色效果。

我尝试通过自定义我的 css 在我的按钮 Bootstrap 上做同样的事情，但由于某种原因它不会放大，它给我带来了缩放和淡化白色效果，就像你在那里看到的那样。

到目前为止，这是我尝试过的:

body {
  background: #6FDC9C !important;
}

a.btn.btn-primary.btn-lg.signup{
  font-size: 1.2em;
  border: 2px solid #fff;
  border-radius: 25px;
  padding: 10px 30px;
  background: #fff;
  color: #C056BB;
}

a.btn.btn-primary.btn-lg.signup:hover{
  background: transparent;
  color: #fff;
  border: 1px solid;
  box-shadow: inset 0 0 20px rgba(255, 255, 255, .5), 0 0 20px rgba(255, 255, 255, .2);
  outline-color: rgba(255, 255, 255, 0);
  outline-offset: 15px;
  text-shadow: 1px 1px 2px #427388; 
}

a.btn.btn-primary.btn-lg.signup:hover::after{
  -webkit-transform: scaleX(1.4) scaleY(1.6);
    transform: scaleX(1.4) scaleY(1.6);
    opacity: 0
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<a class="btn btn-primary btn-lg signup btn-animated" href="#" role="button">SIGN UP</a>

但是这个 CSS 并没有达到我想要的效果。知道我在这里错过了什么吗？

Answer 1

我通常做 different approach当我想在悬停时缩放时，删除 de :hover::after 并添加 transition: all .2s ease-in 到类和 transform: scale( 1.1) 悬停。

a.btn.btn-primary.btn-lg.signup{
  font-size: 1.2em;
  border: 2px solid #fff;
  border-radius: 25px;
  padding: 10px 30px;
  background: #fff;
  color: #C056BB;
  transition: all .2s ease-in;
}



a.btn.btn-primary.btn-lg.signup:hover{
  background: transparent;
  color: #fff;
  border: 1px solid;
  box-shadow: inset 0 0 20px rgba(255, 255, 255, .5), 0 0 20px rgba(255, 255, 255, .2);
  outline-color: rgba(255, 255, 255, 0);
  outline-offset: 15px;
  text-shadow: 1px 1px 2px #427388; 
  transform: scale(1.1);
}