悬停效果不会调整我的按钮大小

Question

我试图像这样发起相同的效果：

正如您所看到的，当鼠标悬停在按钮上时，该按钮具有此缩放和淡化白色效果。

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

到目前为止，我已尝试过：

＆＃13;

＆＃13;

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
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

但是这个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);
}