CSS 按钮动画越来越大

Question

我在 html/less 中创建了一个按钮，当你将鼠标悬停在按钮上时，按钮会变大。目前它非常草率。当您将鼠标悬停在按钮上时，它会变得更大，但我希望它变慢并具有动画效果。

这是我的 HTML 和 LESS 按钮代码：

HTML：

<div id="buttons">
  <a href="#" class="btn green">dance</a>
</div>

CSS

.btn {
  border-radius: 5px;
  padding: 15px 55px;
  font-size: 22px;
  text-decoration: none;
  margin: 20px;
  color: #fff;
  position: relative;
  display: inline-block;
}

.btn:active {
  transform: translate(0px, 5px);
  -webkit-transform: translate(0px, 5px);
  box-shadow: 0px 1px 0px 0px;
}    

.green {
  background-color: #d7d7d7;
  box-shadow: 3px 5px 5px #888888;
  border-radius: 2px;   
}

.green:hover {
  background-color: #000;
/*  Making button bigger on hover  */
  padding: 20px 60px;
}

那么我怎样才能让我的按钮变大变慢并且看起来有点动画呢？

Answer 1

只需transition用于您想要对其产生影响的元素，如果您想缩放它，您可以使用transform: scale()withperspective(10px)来防止对:hover事件的模糊效果https://jsfiddle.net/7tvvmrcf/

.btn {
  border-radius: 5px;
  padding: 15px 55px;
  font-size: 22px;
  text-decoration: none;
  margin: 20px;
  color: #fff;
  position: relative;
  display: inline-block;
}

.btn:active {
  transform: translate(0px, 5px);
  -webkit-transform: translate(0px, 5px);
  box-shadow: 0px 1px 0px 0px;
}


.green {

  background-color: #d7d7d7;
  box-shadow: 3px 5px 5px #888888;
  border-radius: 2px;
  transition: all 1s ease;
  transform: scale(1);
}

.green:hover {
  background-color: #000;
/*  Making button bigger on hover  */
  transform: scale(1.5) perspective(1px)
}

<div id="buttons">
  <a href="#" class="btn green">dance</a>
</div>

Answer 2

您可以为此使用缩放。放入慢速动画的 css 并放入transition: all .5s ease-in-out;用于调整按钮大小的 css。它看起来像这样：.greentransform: scale(1.1);.green:hover

.btn {
  border-radius: 5px;
  padding: 15px 55px;
  font-size: 22px;
  text-decoration: none;
  margin: 20px;
  color: #fff;
  position: relative;
  display: inline-block;
}
.btn:active {
  transform: translate(0px, 5px);
  -webkit-transform: translate(0px, 5px);
  box-shadow: 0px 1px 0px 0px;
}
.green {
  background-color: #d7d7d7;
  box-shadow: 3px 5px 5px #888888;
  border-radius: 2px;
  transition: all .5s ease-in-out;
}
.green:hover {
  background-color: #000;
  /*  Making button bigger on hover  */
  padding: 20px 60px;
  transform: scale(1.1);
}

<div id="buttons">
  <a href="#" class="btn green">Dance</a>
</div>