Image and Form Button

#native_company# #native_desc#

#native_cta#

This site is best viewed in a modern browser with JavaScript enabled.

comptech520

Can I put an image (16x16) in a form button with out making an image for the login button?

sstalder

Your question is not very clear... Do you want to place an image inside a button, or use an image as a button?

You can do both.

Set an image as a background with styles:

comptech520

The way this is done is the image shows and the text lays ontop of it. How can I make so there is the image and then next to it is the text?

This is my code
.imagebuttonstyle {
background:#FFFFFF;
color:#000000;
font-size:8pt;
background: url(http://www.mydomain.com/images/lock.png) no-repeat;
border-width:1px;
border-style:solid;
font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;
}

Theremin

<input class="imagebuttonstyle" name="submit" type="submit" />Login</p>

just put <p> tags inside the <form> tags

sstalder

.imagebuttonstyle {
background:#FFFFFF;
color:#000000;
font-size:8pt;
background: url(http://www.mydomain.com/images/lock.png) no-repeat;
border-width:1px;
border-style:solid;
font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;
}

<input class="imagebuttonstyle" name="submit" type="submit" value="" /> Login

comptech520

goto http://clients.esctonline.com and you will see what I mean

sstalder

This is assuming your image size is proper (i.e. 16x16 px or whatever fits in your button).

.imagebuttonstyle {
	background:#FFFFFF;
	color:#000000;
	font-size:8pt;
	background: #FFFFFF url(http://www.mydomain.com/images/lock.png) no-repeat;
	background-position: left;
	text-align: center;
	border-width:1px;
	border-style:solid;
	font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;
}

<input class="imagebuttonstyle" name="submit" type="submit" value="Login" />

comptech520

that didnt seem to do the trick

sstalder

Can I see your actual page?

comptech520

clients.esctonline.com

sstalder

Ok, can you show me an example of what you are trying to duplicate?

comptech520

I want a button to have an image in it

Button: |[image] Login|

Right now the button overlaps on the image.

sstalder

<style type="text/css">
.imagebuttonstyle { 
    background:#FFFFFF; 
    color:#000000; 
    font-size:8pt; 
    background: #FFFFFF url(http://www.mydomain.com/images/lock.png) no-repeat; 
    background-position: left; 
    text-align: right; 
	width: 100px;/* May need to adjust higher/lower to get expected result */
    border-width:1px; 
    border-style:solid; 
    font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;

}
</style>
<input class="imagebuttonstyle" name="submit" type="submit" value="Login" />