title: Hover effect on button: slide in from left, slide out from left
body: <p>I would like to create this hover effect on buttons:</p>
  <p>On hover, the background color changes sliding in from the left side. If the mouse leaves the button the original background color is supposed to return but sliding in from the left.</p>
  <p>Right now I have this code (both classes apply to the button):</p>
  <pre class="lang-css prettyprint-override"><code>.button_slide {
    color: #FFF;
    border: 2px solid rgb(216, 2, 134);
    border-radius: 0px;
    padding: 18px 36px;
    display: inline-block;
    font-family: &quot;Lucida Console&quot;, 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;
  }
  
  .slide_right:hover {
    box-shadow: inset 400px 0 0 0 #D80286;
  }
  </code></pre>
  <p>I would like to have the hover background perish from the left side when leaving the button. Right now it perishes from the right side.</p>
  <p>Can anybody help me with that?</p>