title: rounded image link issue
body: <p>I have used the following image as background image for link. </p>
  
  <p><img src="https://i.stack.imgur.com/wC3xc.png" alt="enter image description here"></p>
  
  <p>If I hover over the image the link display in the edges also. I just want to show the link for exact round image and not for the blank edges. Is there any possibility to do this in css?</p>
  
  <p><img src="https://i.stack.imgur.com/C4Jia.jpg" alt="enter image description here"></p>
  
  <pre><code>css:
  
  .buy_purple a{ background-image:url(../imagesf/buy_purple.png); width:81px; height:57px; background-repeat:no-repeat; float:right; font-size:20px; font-weight:bold; text-shadow: 1px 1px 2px #c9a3c2; text-align:center; padding-top:29px; color:#000;}
  
  Html: 
  
  &lt;div class="buy_purple"&gt;&lt;a href="#"&gt;BUY&lt;/a&gt;&lt;/div&gt;
  </code></pre>