title: CSS animation moving and changing color
body: <p>I am not that familiar with CSS animations. My client want to achieve <a href="https://www.dropbox.com/s/byxuef26nj6o7te/CSS%20Hover%20Effect.jpg?dl=0" rel="nofollow">the following result</a> when hovering the <code>contact</code> button:</p>
  
  <p>so to be clear:</p>
  
  <ol>
  <li>the square's move from left to right and vice versa</li>
  <li>when the square moves, the line underneath it changes color</li>
  </ol>
  
  <p>the top image it the start state, the middle is during the effect (50%) and the bottom image is the end stage.</p>
  
  <p>Is this achievable with only CSS or do I need JS as well?
  How would I approach this?</p>