Adding an LogIn image to a Form

I’m using a php web script with a Log In Box

I had someone redesign/recode the Log In Box, but the Submit button
didn’t work. So I added back in the old submit button, however I’d like to use the newer button image for it. I just don’t know how to code it correctly. The form that currently works is this one:

<form action="login.php" method="post" accept-charset="UTF-8" class="middletext">
<label><font class="font4_13">Username</font></label><span class="username"><input type="text" name="user_name_login" size="16" style="width:138px;" />
<label><font class="font4_13">Password</font></label><span class="password"><input type="password" name="password_login" size="16" style="width:138px;" /
[B]<input type="submit" value="[var.lang_login_now]" class="" />[/B]
<input type="hidden" name="submitted" value="yes" />
<input type="hidden" name="remember_me" value="remember_me" />
</form>

The form that doesn’t work is this one:

<form action="login.php" method="post" accept-charset="UTF-8" class="middletext">
<label><font class="font4_13">Username</font></label><span class="username"><input type="text" name="user_name_login" size="16" style="width:138px;" />
<label><font class="font4_13">Password</font></label><span class="password"><input type="password" name="password_login" size="16" style="width:138px;" />
[B]<a class="btn_vid" href="login.php value="[var.lang_login_now]">--></a>[/B]
<input type="hidden" name="submitted" value="yes" />
<input type="hidden" name="remember_me" value="remember_me" />
</form>

How can integrate the “btn_vid” image into the first form above so that the log in form works with the new image?

Thanks

Thank you, that was very helpful.

Your button doesn’t work on the second one because it is not a button. IT is a link. It won’t submit the form. Just apply your class to the button…


<input type="submit" value="[var.lang_login_now]" class="btn_vid" />

Thanks for your reply. Here is the btn_vid:

.btn_vid { 
width:189px;
height:21px;
border:0px solid #333333;
display:block;
background: url(images/login_btn.gif);
background-repeat:no-repeat;
font-size:10px;
text-align:center;
float:right;
padding-right:10px;
}

.btn_vid:hover{ 
border:0px solid #333333; 
display:block;
background: url(images/login_btnhov.gif);
background-repeat:no-repeat;
text-align:center;
} 

This is more of a CSS question rather then a PHP question. Could you please paste the code for the btn_vid class