html - 按钮悬停动画背景颜色未完全填充

Question

当您将鼠标悬停在左侧和右侧的按钮上时，可以看到相同的空间。我们如何解决这个问题？这是将鼠标悬停在按钮上时的图像，这就是它的外观。

这是 jsfiddle 链接 https://jsfiddle.net/vct5acc0/1/

CSS 代码在这里:-

body {
   background-color: #4F4BFA;
  }
.btn1 {
    border: 2px solid #fff;
}
.btn-cmn {
    width: 175px;
    height: 52px;
    background-color: transparent;
    border-radius: 26px;
    font-size: 18px;
    font-weight: 700;
    line-height: 28px;
    cursor: pointer;
}

Answer 1

这是我的解决方案，灵感来自 Kuba 的第一个命题:
(在悬停时添加了嵌入阴影的那个，不是更新后的那个!)
看我在CSS代码中的注释，只修改了2处。

body {
  background-color: #4F4BFA;
}

.btn1 {
  border: none; /* Modified */
  box-shadow: inset 0px 0px 0px 2px #fff; /* Added */
}

.btn-cmn {
  width: 175px;
  height: 52px;
  background-color: transparent;
  border-radius: 26px;
  font-size: 18px;
  font-weight: 700;
  line-height: 28px;
  cursor: pointer;
}

.button-hover-effect {
  position: relative;
  overflow: hidden;
  border-color: #000;
  color: #000;
  transition: color .4s cubic-bezier(.4, 0, .2, 1);
  -webkit-transition: color .4s cubic-bezier(.4, 0, .2, 1);
  -moz-transition: color .4s cubic-bezier(.4, 0, .2, 1);
  -o-transition: color .4s cubic-bezier(.4, 0, .2, 1);
  -ms-transition: color .4s cubic-bezier(.4, 0, .2, 1);
}

.btn-hfix1 {
  height: 53px;
}

.button-hover-effect.white {
  border-color: #fff;
  color: #fff;
}

.button-hover-effect.white:hover {
  color: #000;
}

.button-hover-effect::before {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  content: "";
  background-color: #000;
  z-index: 1;
  border-radius: 26px;
  transition: transform .4s cubic-bezier(.4, 0, .2, 1);
  -webkit-transition: -webkit-transform .4s cubic-bezier(.4, 0, .2, 1);
  -moz-transition: -moz-transform .4s cubic-bezier(.4, 0, .2, 1);
  -o-transition: -o-transform .4s cubic-bezier(.4, 0, .2, 1);
  -ms-transition: -ms-transform .4s cubic-bezier(.4, 0, .2, 1);
  transform: scale(0, 1);
  -webkit-transform: scale(0, 1);
  -moz-transform: scale(0, 1);
  -o-transform: scale(0, 1);
  -ms-transform: scale(0, 1);
  transform-origin: right center;
  -webkit-transform-origin: right center;
  -moz-transform-origin: right center;
  -o-transform-origin: right center;
  -ms-transform-origin: right center;
}

.button-hover-effect:hover::before {
  transform: scale(1, 1);
  -webkit-transform: scale(1, 1);
  -moz-transform: scale(1, 1);
  -o-transform: scale(1, 1);
  -ms-transform: scale(1, 1);
  transform-origin: left center;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  -ms-transform-origin: left center;
}

.button-hover-effect.white::before {
  background-color: #fff;
}

.button-hover-effect .str {
  position: relative;
  z-index: 2;
}

<button class="btn-cmn btn1 button-hover-effect white btn-hfix1">
  <span class="str">Know more</span>
</button>

我只将border设置为none，然后添加了一个inset box-shadow。

希望对你有帮助。