<head>에
<style type="text/css">

a:visited {text-decoration:none; color:white;}
a:link {text-decoration:none; color:white;}
a:hover {text-decoration:none; color:white;}


.first {border:1 solid #D76704; color:white;text-align:center;padding:2 0 0 2}


.over {border-style:solid; border-width:1;
border-color:#E89B57 #B15604 #B15604 #E89B57;
color:white; text-align:center;padding:2 0 0 2}


.down {border-width:1; border-style:solid;
border-color:#B15604 #E89B57 #E89B57 #B15604;
color:white; text-align:center; padding:2 0 0 2}

</style>

***
first : 처음 띄었을때 모양
over : 마우스가 올라갔을때 모양
down : 마우스를 눌렀을때 모양

border-color:#B15604 #E89B57 #E89B57 #B15604;
상(위쪽),우(오른쪽),하(아래쪽),좌(왼쪽)  색상
"상,좌" 를 같게 하고 바탕보다 밝은색을 지정,
"우,하" 를 같게 하고 바탕보다 어두은 색을 지정하면 볼록한 느낌.

<body>에 삽입방법.
<body bgcolor=#D76704>
<table width="120" height="20" cellpadding="0" cellspacing="0">
<tr>
<td class="first"
onMouseOver="this.className='over'"
onMouseOut="this.className='first'"
onMouseDown="this.className='down'"
onMouseUp="this.className='over'">
<font style="font-size:9pt;color:white">이곳에 글자</font>
</td>
</tr>
</table>

***
onMouseOver : 마우스가 올라갔을때
onMouseOut: 마우스가 내려갔을때
onMouseDown : 마우스를 눌렀을때
onMouseUp : 마우스를 눌렀다가 떼었을때