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

时间：2018-04-25 07:30:52

标签： html css

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

enter image description here

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

4 个答案:

答案 0 :(得分：3)

这是我的解决方案，灵感来自库巴的第一个主张：
（在悬停上添加了插入阴影的那个，而不是更新的那个！）
请参阅我在CSS代码中的注释，只有2个修改。

＆＃13;
＆＃13; 
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;
}
＆＃13; 
<button class="btn-cmn btn1 button-hover-effect white btn-hfix1">
  <span class="str">Know more</span>
</button>
＆＃13;
＆＃13;
＆＃13;

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

我希望它有所帮助。

答案 1 :(得分：1)

快速而“脏”。在悬停时移除原始边框并添加插入阴影（作为边框）以在转换时查看边框。

更新：

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


body {
   background-color: #4F4BFA;
  }
.btn1 {
    border: none;
    box-shadow: inset 0px 0px 0px 2px #fff;
}
.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;
    border:0px solid #fff;
    box-shadow: inset 0px 0px 0px 2px #fff;
}
.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;
    border:5px solid #fff;
}
.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>

答案 2 :(得分：-1)

更新了小提琴。请检查

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

https://jsfiddle.net/vct5acc0/8/

答案 3 :(得分：-1)

＆＃13;
＆＃13; 
body {
   background-color: #4F4BFA;
  }
.btn1 {
    border: 2px solid #fff;
}
.button-hover-effect.white:hover {
    border-color: #fff;
    color: #fff;
}
.btn-cmn {
    width: 175px;
    height: 52px;
    background-color: transparent;
    border-radius: 26px;
    font-size: 18px;
    font-weight: 700;
    line-height: 28px;
    cursor: pointer;
}
.btn-cmn:hover {
    width: 175px;
    height: 52px;
    background-color: #fff;
    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;
}
＆＃13; 
<button class="btn-cmn btn1 button-hover-effect white btn-hfix1">
													<span class="str">Know more</span>
												</button>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题