title: draw circle around the arrow using pure css
body: <p>I have a button which is created using pure CSS.</p>
  
  <p>On mouseover the button an arrow animates from top to bottom.I would like to create a circle just outside the arrow. So the circle should contain the arrow.</p>
  
  <p>I am not sure if it is possible or not. I did some Google research but didn't find a suitable thing.</p>
  
  <pre><code>&lt;a href="#" class="button"&gt;
    &lt;span&gt;Hover Me&lt;/span&gt;
  &lt;/a&gt;
  </code></pre>
  
  <p>The fiddle is <a href="http://jsfiddle.net/squidraj/DFNn9/" rel="nofollow">here</a></p>