Button wird nicht richtig wiedergegeben

[matte]

Hallo,

ich möchte meiner loginbox ein paar schöne button spendieren.

Der code meiner loginbox enthält folgendes:

<script language="javascript">  
 function changeBox()  
 {  
    document.getElementById('div1').style.display='none';  
    document.getElementById('div2').style.display='';  
    document.getElementById('password').focus();  
 }  
 function restoreBox()  
 {  
    if(document.getElementById('password').value=='')  
    {  
      document.getElementById('div1').style.display='';  
      document.getElementById('div2').style.display='none';  
    }  
 }  
</script>  
<table width="144" border="0" cellpadding="0">  
<form action="http://www.domain.com/mail/index.php?action=login" method="post">  
<input type="hidden" name="do" value="login" />  
<tr>  
<td height="22" align="center" valign="top" width="144" colspan="2">  
<input name="email_full" type="text" value="E-mail" onBlur="if(this.value=='') this.value='E-mail';" onFocus="if(this.value=='E-mail') this.value='';">  
</tr>  
<tr>  
<td height="24" align="center" valign="top" width="144" colspan="2">  
<div id="div1">  
<input name="pass_temp" type="text" value="Password" size="20"  
maxlength="20" onfocus="changeBox()" />  
</div>  
<div id="div2" style="display:none">  
<input name="password" id="password" type="password" value="" size="20"  
maxlength="20" onBlur="restoreBox()" />  
</div>  
</td>  
</tr>  
<tr>  
<td height="24" style="font-size:0.8em" align="left" valign="top" width="100%">  
</td>  
</tr>  
<td height="28" align="center" valign="top" width="136">  
<input type="submit"value="Login" style="float: left; font-family:Verdana; font-size:8pt"></form>  
<form action="http://www.domain.com/mail/index.php?action=signup" method="post">  
<input type="submit"value="Signup" style="float: left; font-family:Verdana; font-size:8pt"></form>  
</td>  
</table>

Jetzt möchte ich mit css den Button Login und Signup ein neues Aussehen geben.

Dazu ersetze ich in den Button

Für login

<input type="submit"value="Login" style="float: left; font-family:Verdana; font-size:8pt">

durch

<input type="submit"value="Login" class="button">

ersetzt.

Leider wird der Button aber nicht richtig wiedergegeben

Rufe ich den Button hingegen mit

<a class="button" href="#">Login</a>

auf, erscheint er zwar korrekt, aber es wird auf die Art der Login nicht ausgeführt.

Meine Frage: Woran liegt es, dass der Button nicht angezeigt wird?

Besten Grüß matte