小编afa*_*faf的帖子

我在 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;
}

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