title: jQuery Gradual Sink Effect Button
body: <p>There are two ways to do this the way I see it without flash.</p>
  
  <p>When you move your mouse over the image; it gradually changes to the hover class. Or when when you hover over the image, the margins change each side going either horizontal either way.</p>
  
  <p>The first way would be better but it is CSS at the end of the day. I want this button to gradually sink when you hover over it - and you move your mouse off, it bounces back:</p>
  
  <h1>Html</h1>
  
  <pre><code>&lt;center&gt;&lt;br /&gt;&lt;br /&gt;
  &lt;a href="#"&gt;&lt;img src="//gc-cdn.com/button.png" alt=""&gt;&lt;/a&gt;
  &lt;/center&gt;
  </code></pre>
  
  <h1>Css</h1>
  
  <pre><code>img{border-right:15px solid #333;border-bottom:15px solid #333}
  img:hover{border-right:1px solid #333;border-bottom:1px solid #333}
  </code></pre>
  
  <h1>jsFiddle</h1>
  
  <p><a href="http://jsfiddle.net/fk6eG/9/" rel="nofollow">http://jsfiddle.net/fk6eG/9/</a></p>