title: Arrow changed position when hover the button
body: <p><a href="http://jsfiddle.net/nA4P9/15/" rel="nofollow">http://jsfiddle.net/nA4P9/15/</a></p>
  
  <p>Notice the right arrow changed its position to the left when hovered. The arrow need to stay where it is on the right. I tried to use the position, margin and none of them worked.</p>
  
  <p>Also when hovered the button should be in #4d4d4d (gray).</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="fluid FindHome-div"&gt;
  &lt;h1&gt;&lt;a href="http://www.ntreisinnovia.net/ntr/idx/index.php?key=b74b4ef49443e4ac6699324016bbaec5" class="FindHome" target="_blank"&gt;Find your home&lt;/a&gt;     &lt;/h1&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.FindHome {background-color:#09F; width:300px; border:1px solid #09F; padding:10px 40px 10px 15px; border-radius:5px; display:block; margin-left:auto; margin-right:auto; background: #09F url('http://www.magnixsolutions.com/clients/tas/img/arrow.png') no-repeat; background-position:320px center; margin-bottom:35px; overflow: hidden; text-decoration:none; color:#ffffff;}
  .FindHome:hover {background:#4d4d4d; border:1px solid #4d4d4d; background: #09F url('http://www.magnixsolutions.com/clients/tas/img/arrow.png') no-repeat;}
  .FindHome-div {display:inline-block;}
  </code></pre>