html - CSS 过渡闪烁

Question

当用户将鼠标悬停在我的按钮上时，会出现一种从左到右的颜色。当我悬停它时，它没有平滑过渡，而是有点闪烁。

我该如何解决？

.slide_right:hover {
  box-shadow: inset 400px 0 0 0 #D80286;
}

.button_slide {
  color: #FFF;
  border: 2px solid rgb(216, 2, 134);
  border-radius: 0px;
  padding: 18px 36px;
  display: inline-block;
  font-family: "Lucida Console", Monaco, monospace;
  font-size: 14px;
  letter-spacing: 1px;
  cursor: pointer;
  box-shadow: inset 0 0 0 0 #D80286;
  -webkit-transition: ease-out 0.4s;
  -moz-transition: ease-out 0.4s;
  transition: ease-out 0.4s;
}

<input type="button" class="button_slide slide_right" value="BUTTON: SLIDE INSIDE">
<input type="button" class="button_slide slide_right" value="BUTTON: SLIDE INSIDE">
<input type="button" class="button_slide slide_right" value="BUTTON: SLIDE INSIDE">
<input type="button" class="button_slide slide_right" value="BUTTON: SLIDE INSIDE">
<input type="button" class="button_slide slide_right" value="BUTTON: SLIDE INSIDE">
<input type="button" class="button_slide slide_right" value="BUTTON: SLIDE INSIDE">

View on JSFiddle

Answer 1

只需将一个非常小的扩散半径添加到初始框阴影值即可。在这种情况下 box-shadow: inset 0 0 0 0.01px #D80286;。

.slide_right:hover {
  box-shadow: inset 400px 0 0 0 #D80286;
}

.button_slide {
  color: #FFF;
  border: 2px solid rgb(216, 2, 134);
  border-radius: 0px;
  padding: 18px 36px;
  display: inline-block;
  font-family: "Lucida Console", Monaco, monospace;
  font-size: 14px;
  letter-spacing: 1px;
  cursor: pointer;   
  box-shadow: inset 0 0 0 0.01px #D80286;
  -webkit-transition: ease-out 0.4s;
  -moz-transition: ease-out 0.4s;
  transition: ease-out 0.4s;
}

<input type="button" class="button_slide slide_right" value="BUTTON: SLIDE INSIDE">
<input type="button" class="button_slide slide_right" value="BUTTON: SLIDE INSIDE">
<input type="button" class="button_slide slide_right" value="BUTTON: SLIDE INSIDE">
<input type="button" class="button_slide slide_right" value="BUTTON: SLIDE INSIDE">
<input type="button" class="button_slide slide_right" value="BUTTON: SLIDE INSIDE">
<input type="button" class="button_slide slide_right" value="BUTTON: SLIDE INSIDE">