CSS animation moving and changing color
<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>