渐变按钮上的CSS BG和边框动画

Question

我想要的是什么：

我的按钮上的悬停动画应创建边框。颜色在4个角落结束后，应该使用渐变颜色在按钮的每一侧绘制边框。 我的猜测是简单地添加一个边框，当它悬停在按钮上时不会消失，但我已经有一些边框来创建这种效果所以我不知道在哪里添加它。

我的代码：

＆＃13;

＆＃13;

*{margin:0;padding:0;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;}
#container{
  width:715px;
  height:230px;
  margin:50px auto;
}


.button-8{
  width:140px;
  height:50px;
  border-width:0px;
  border-style:solid;
  border-image:-webkit-linear-gradient(left,  #9357cc 0%,#2989d8 50%,#2cc99d 100%);
  float:left;
  text-align:center;
  cursor:pointer;
  position:relative;
  box-sizing:border-box;
  overflow:hidden;
  margin:0 0 40px 50px;
}
.button-8 a{
  font-family:arial;
  font-size:16px;
  color:#fff;
  text-decoration:none;
  line-height:50px;
  transition:all .5s ease;
  z-index:2;
  position:relative;
}
.eff-8{
  width:140px;
  height:50px;
  border-width:140px;
  border-style:solid;
  border-image:-webkit-linear-gradient(left,  #9357cc 0%,#2989d8 50%,#2cc99d 100%);
  position:absolute;
  transition:all .5s ease;
  z-index:0;
  box-sizing:border-box;
}
.button-8:hover .eff-8{
  border-width:0px;
  border-style:solid;
  border-image:-webkit-linear-gradient(left,  #9357cc 0%,#2989d8 50%,#2cc99d 100%);
}
.button-8:hover a{
  color:#34495e;
}

＆＃13;

<div id="container">


  <div class="button-8">
    <div class="eff-8"></div>
    <a href="#"> Hover Me </a>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

小提琴： https://jsfiddle.net/css_stroller/yrLm8vgk/

副作用/注释：

这里的另一个问题是文本是白色的，当鼠标离开按钮时看起来会淡出，但我希望文本与渐变背景同时显示 ，而不是之前它似乎不会在短时间内淡出。

注意：有时动画有问题。它应该像这样工作： 背景在中心分成4个部分，向4个角移动，留下白色背景。您可能会尝试多次悬停，或更改z-index。我真的不知道为什么会这样。