时间戳

首页 > 解决方案 > 按钮悬停动画背景颜色未完全填充

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

问题描述

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

在此处输入图像描述

这是 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;
}

标签： htmlcss

解决方案

这是我的解决方案，灵感来自 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.

我希望它有所帮助。

推荐阅读