title: CSS BG&Border Animations on Gradient Button
body: <h1>What I want:</h1>
  
  <p>The hover animation on my button should create a border. After the color ended up at the 4 corners it should draw the border on each side of the button with that gradient color. 
  My guess would be to simply add a border which doesn't disappear when hovered on the button but I already have some borders to create that effect so I dont know where to add it. </p>
  
  <h2>My Code:</h2>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>*{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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="container"&gt;
  
  
    &lt;div class="button-8"&gt;
      &lt;div class="eff-8"&gt;&lt;/div&gt;
      &lt;a href="#"&gt; Hover Me &lt;/a&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Fiddle:
  <a href="https://jsfiddle.net/css_stroller/yrLm8vgk/" rel="nofollow noreferrer">https://jsfiddle.net/css_stroller/yrLm8vgk/</a></p>
  
  <h3>Side effects/Notes:</h3>
  
  <p>Another problem here is that the text is white and appears to be fading out when mouse leaves the button but I want the text to appear <strong>at the same time</strong> as the gradient background, not before so that it doesnt seem to fade out for a short period of time.</p>
  
  <p>Note: Sometimes the animation is faulty. It is supposed to work like this:
  The background slices up in 4 parts in the center and move towards the 4 corners leaving a white background. You might try to hover multiple times, or change z-index. I really dont know why that is.</p>