放大div扩大按钮

Question

我想在div中有一个具有一定高度和背景颜色的按钮，当您将鼠标悬停在上面时，该按钮会放大。但我不想改变div的优势。见下面的图片。有没有办法用CSS做到这一点？

谢谢

Answer 1

只需使用

transform: scale(factor);

添加

transition: property transition-timing transition-type;

如果您希望随着时间的推移平稳过渡。

.outer {
  background-color: black;
  color: white;
  position: relative;
  padding: 20px;
}

.circle {
  float: right;
  width: 0;
  height: 0;
  padding: 15px;
  border: 1px solid black;
  border-radius: 50%;
  background-color: white;
  transition: transform 0.3s ease-in-out;
  vertical-align: middle;
  margin-right: 50px;
}

.outer:hover .circle {
  transform: scale(3);
}

<div class="outer">
  <div class="circle"></div><code>&lt;div&gt;</code>
</div>