怎样作一个简单的工具条，鼠标放上与离开能有凹凸感就可以，不需要太复杂的？

<html> <head> 
<style> .button2 
{ 
border-right:1px solid buttonhighlight; 
border-left:1px solid buttonshadow; 
border-bottom:1px solid buttonhighlight; 
border-top:1px solid buttonshadow 
} TD 
{ 
cursor: hand; font-size: 9pt; font-family: 宋体; text-align: center; text-valign: middle 
} .handin 
{ 
height:18px; 
width:2px; 
border-left:1px solid buttonshadow; 
border-right:1px solid buttonhighlight 
} .handout 
{ 
height:18px; 
width:2px; 
border-left:1px solid buttonhighlight; 
border-right:1px solid buttonshadow; 
} 
.into 
{ 
width:100%; 
border-right:1px solid buttonhighlight; 
border-left:1px solid buttonshadow; 
border-bottom:1px solid buttonhighlight; 
border-top:1px solid buttonshadow 
} .outto,.button1 
{ 
background-color: buttonface; 
background-repeat: repeat; 
background-attachment: scroll; 
border-left: 1px solid buttonhighlight; 
border-right: 1px solid buttonshadow; 
border-top: 1px solid buttonhighlight; 
border-bottom: 1px solid buttonshadow; 
background-position: 0%" 
} .button0 
{ } 
</style> 
</head> <body topmargin="0" leftmargin="0" bgcolor="#E0E0E0"> 
<script> 
function change_button(num) 
{ 
if(event.srcElement.tagName=="TD"&&event.srcElement.value=="button") 
event.srcElement.className = "button"+num; 
} 
</script> <div class="into" style="width: 100%; height: 25"> 
<table class="outto" border="0" width="100%" height="25" cellspacing="1" onmouseover="change_button(1)" onmouseup="change_button(0)" onmousedown="change_button(2)" onmouseout="change_button(0)"> 
<tr> 
<td width="1%" height="19"><span class="handout"></span></td> 
<td width="9%" height="19" value="button">按钮TD</td> 
<td width="1%" height="19"><span class="handin"></span></td> 
<td width="9%" height="19" value="button">按钮TD</td> 
<td width="1%" height="19"><span class="handin"></span></td> 
<td width="9%" height="19" value="button">按钮TD</td> 
<td width="1%" height="19"><span class="handin"></span></td> 
<td width="69%" height="19"></td> 
</tr> 
</table> 
</div> </body> 
</html>