Paste this html script in the Insert HTML field:
<style type="text/css" >a.button, a:visited.button{display:
block;font-family:arial;
font-weight:bold;text-align:center;color:000;width:122px;height:14px;
background-color:transparent;background-image: url(buttons/blue.jpg);
text-decoration: none;padding:4px;font-size:10px;}

a:hover.button
{display: block;font-family:arial;
font-weight:bold;text-align:center;color:FFFF00;width:122px;height:14px;
background-color:transparent;background-image:
url(buttons/blue2.jpg);
text-decoration: blink;;padding:4px;font-size:10.5px;}
</style >

where (buttons/blue.jpg) indicates that you have an image file called
blue.jpg located in the "buttons" folder, located in the same directory as
your .index file.

where  (buttons/blue2.jpg) indicates the hover image of the button, located
in the same folder.

the second step is to insert this html frament in another html insert field:
<a class="button" href="url">NAME LINK</a>

where "url" indicates the link and "NAME LINK" is the text that appears on
your button.

You need to have had two image files that are identical in pixels, one for
the original button, one for the hover effect.  They can be jpeg, bmp, gif,
etc.

I got this from a free website, but forgot where...

good luck.