If you want the buttons to change whn hovered over use this.
in your product.tpl
find and change:
<tr>
<td>{include file="buttons/add_to_cart.tpl" style="button" href="javascript
: if(FormValidation()) document.orderform.submit();"}</td>
<td> &nbs p;</td>
<td>
{if ($login ne "" || $config.Wishlist.add2wl_unlogged_user eq 'Y') && $active_modules.Wishlist ne ""}
{include file="customer/add2wl.tpl"}
{/if}
</td>
</tr>
to:
<tr>
<td align="center"><a href="javascript
: document.orderform.submit();"
onmouseover="document.atcButton.src='skin1/images/atcButton2.gif';"
onmouseout="document.atcButton.src='skin1/images/atcButton.gif';">
<img name="atcButton" src="skin1/images/atcButton.gif"
width ="200px" height="37px" />
</a>
</td>
<td> &nbs p;</td>
<td>
{if ($login ne "" || $config.Wishlist.add2wl_unlogged_user eq 'Y') && $active_modules.Wishlist ne ""}
{include file="customer/add2wl.tpl"}
{/if}
</td>
</tr>
Now make the images you want to use as your 'out' and 'hover' buttons. Once you have them made upload them and the new product.tpl and you are good to go.