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

Question

我试图启动同样的效果，如下所示：

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

我尝试通过自定义我的CSS在按钮引导程序上执行相同的操作，但由于某种原因它不会放大，并且它给了我缩放和褪色白色效果的效果，就像你在那里看到的那样。

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

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

你的 CSS 中缺少一些东西 您需要先创建虚拟的.btn，它会放大并消失，留下原始的.btn。在使用 :hover::after 之前： 对于你的情况：

a.btn.btn-primary.btn-lg.signup::after {
    content: "";
    display: inline-block;
/*inherit dimensions as is*/
    height: 100%;
    width: 100%;
/*you can change your original border-radius too */
    border-radius: 100px;
    position: absolute;
/*inherit dimensions as is*/
    top: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    /* the transition displayed seems to be using 2seconds and ease-in*/
    transition: all 0.2s ease-in;
}

将此添加到您的代码中并提供反馈！

Answer 2

当我想在悬停时缩放时，我通常会采取不同的方法，删除

: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);
}