如何删除按钮背景颜色和边框之间的白色像素？

Question

在边框和背景颜色之间显示一些白色像素。背景没有 100% 填充按钮背景，看起来很烦人。

我之前已经尝试过按钮的大小::但它似乎没有帮助。

button {
  border: 2px solid #000;
  border-radius: 100px;
  overflow: hidden;
  color: #fff;
  pointer-events: auto;
  cursor: pointer;
  background: #e7e7e7;
  padding: 1.5rem 3rem;
  margin: 0;
  position: relative;
  display: inline-block;
}

button p {
  padding: 0;
  margin: 0;
  font-family: "ClashGrotesk-Medium";
  font-size: 3em;
  position: relative;
  mix-blend-mode: difference;
}

button::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 100px;
  content: "";
  background: #000;
  transition: transform 0.3s cubic-bezier(0.7, 0, 0.2, 1);
}

button:hover::before {
  transform: translate3d(0, -100%, 0);
}

<button>
  <p>Lorem Ipsum</p>
</button>

Answer 1

内部绝对层，不需要有半径，所以如果我们删除它，它会填充两个圆之间的间隙。

button {
  border: 2px solid #000;
  border-radius: 100px;
  overflow: hidden;
  color: #fff;
  pointer-events: auto;
  cursor: pointer;
  background: #e7e7e7;
  padding: 1.5rem 3rem;
  margin: 0;
  position: relative;
  display: inline-block;
}

button p {
  padding: 0;
  margin: 0;
  font-family: "ClashGrotesk-Medium";
  font-size: 3em;
  position: relative;
}

button::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: "";
  /* border-radius: 100px; */
  background: #000;
  transition: transform 0.3s cubic-bezier(0.7, 0, 0.2, 1);
}

button:hover::before {
  transform: translate3d(0, -100%, 0);
}

<button><p>Lorem Ipsum</p></button>