CSS 边框过渡正在按下按钮

Question

所以我在悬停时有一个边框过渡，并且在圆形按钮处于活动状态时边框会变大。但是，边框向下扩展，将按钮向下推。有什么方法可以使边界均匀地向外扩展吗？我在这个网站和其他网站上搜索了解决方案，虽然也有类似的问题，但他们没有具体回答这个问题。

谢谢！

HTML:

<center><a class="btn" href="#"></a></center

CSS:

.btn {
  vertical-align: top;
  transform: translateY(20px);
  background-color: black;
  display: inline-block;
  height: 300px;
  width: 300px;
  border-radius: 50%;
  border: 0px solid red;
  transition: border-width 0.1s ease-in;
  margin: 0.5em;
}

.btn:hover {
  border: 20px solid red;
}

.btn:focus {
  border: 75px solid red;
}

Answer 1

不使用边框，您可以通过在按钮后面放置 pseudoelement 并根据需要在鼠标悬停和聚焦时改变其比例来生成边框效果。

*另请注意，<center> 在 HTML5 中已弃用。您可以使用 CSS 来居中内容。

.btn {
  display: block;
  margin: 5rem auto;
  position: relative;
  background-color: black;
  height: 300px;
  width: 300px;
  border-radius: 50%;
  transition: border-width 0.1s ease-in;
}

.btn:before {
  content: '';
  display: block;
  position: absolute;
  background: red;
  border-radius: 50%;
  width: 300px;
  height: 300px;
  z-index: -1;
  transition: all .1s ease;
}

.btn:hover:before {
  transform: scale(1.1);
}

.btn:focus:before {
  transform: scale(1.25);
}

<a class="btn" href="#"></a>

CSS 边框过渡正在按下按钮

CSS transition for border is pushing the button down

html

css

transition

button