Login boxes

I'm not sure if this should go in here or the web code part. I've seen in some Photoshop website templates some login and password boxes with nice fx on them and wanted to include them in my own designs instead of using the standard boring ones, how are they converted from an image to an actual login box on a html page? Or is this not possible?

[GoldNetX]

http://www.gusmayo.gwgaming.net/

If you mean like the buttons on my shoutbox then this is thecode I use:


This is the information for the form items, they are a bit different than the submit button

HTML CODE:

<div id="nameinput">

<input type="text" style="background-color: transparent; border: solid 0px #FFF; width: 85px; font-family: Verdana, sans-serif; color: #3DB4F9; font-size:10px;" maxlength="20" name="name">

</div>


<div id="linkinput">

<input type="text" style="background-color: transparent; border: solid 0px #FFF; width: 85px; font-family: Verdana, sans-serif; color: #3DB4F9; font-size:10px;" maxlength="100" name="site"/>			

</div>


<div id="textinput">

<textarea style="background-color: transparent; border: solid 0px #FFF; width: 115px; height:93px; font-family: Verdana, sans-serif; color: #3DB4F9; font-size:10px;" name="text1"></textarea>

</div>

CSS CODE:

#nameinput{
padding-left:6px;
padding-top:5px;
height:28px;
width:103px;
background-color: transparent;
background-image:url(images/images_05.png);
background-repeat: no-repeat;
}

#linkinput{
padding-left:6px;
padding-top:7px;
height:28px;
width:103px;
background-color: transparent;
background-image:url(images/images_09.png);
background-repeat: no-repeat;
}

#textinput{
padding-left:6px;
padding-top:4px;
height:105px;
width:132px;
background-image:url(images/images_18.png);
}

To make the submit button:

<a href="javascript:void(document.yourFormName.submit())"><img border="0" src="yourButton.imageFormat" /></a>

Yes that's what I was thinking of. I understand how to do it now, thanks

[Man1c M0g]

Thanks for that code GoldnetX - even I've learned something!

[GoldNetX]

Hehe...no problem.