css - 用放大的 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>