title: Slide background color transition
body: <p>I found this example from a thread here in stackoverflow.</p>
  
  <pre><code>&lt;a href="#"&gt;aosgibmoa bnocibnas&lt;/a&gt;
  
  a{
  display:inline-block;
  background:#fff;
  position:relative;
  padding:2px 5px;
  
  background:-webkit-gradient(linear, left top, right top, color-stop(0.5, #fff), color-stop(0.5, #000));
  background-size:200% 100%;
  background-position:0 0;
  -webkit-transition:background-position .3s ease-out;
  }
  
  a:hover{
      background-position:100% 0;
  }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/nsfxE/1/" rel="nofollow">http://jsfiddle.net/nsfxE/1/</a></p>
  
  <p>But I'm not sure how to change the -webkit-gradient to other vendor prefix and the normal standard one.</p>
  
  <p>I want to make sure that it is somewhat modern cross browser compatible.</p>