CSS FORM AYUDA!!!

[kishama28]

Hola buenas como están, bueno tengo un pequeño problemilla como principiante ;tengo mi css que toy creando para mi formulario Contacto de mi web, el codigo es este:

#form {
border:none;
width:450px;
margin:auto;
}
#form legend{
font-weight:bold;
font-size:12px;
}
#form ol{
list-style:none;
}
#form ol li{
padding-bottom:5px;
}
#form ol li label{
width:120px;
float:left;
text-align:left;
}
#form input[type=text] {
/*border:1px solid #CCCCCC;*/
}
#form input.btn {
padding:3px;
color:#FFFFFF;
background-image: url(http://8zk88g.blu.livefilestore.com/...Sr_3GyGJ/2.png);
width:72px;
height:31px;
font-size:14px;
border:none;
background-repeat:repeat-x;
}

Y LO QUE QUERÍA HACER YO ES PONER DIFERENTES IMAGENES EN MI BOTON EN SUS DIFERENTES ESTADOS. ENCONTRE ESTO:

A:link {
background-image: url(cualquierimagen.jpg);--->esa sera la imagen que se vera cuando esta en reposo
}

A:HOVER {
background-image: url(cualquierimagen.jpg);--->esa sera la imagen que se vera cuando pases el mouse por encima
}

A:FOCUS {
background-image: url(cualquierimagen.jpg);--->esa sera la imagen que se vera cuando se de click encima
}

PERO NO ENTIENDO DONDE PONERLO SI ME DAN UNA AYUDADITA. YO DONDE MODIFICO MI BOTÓN ES EN:

#form input.btn {
padding:3px;
color:#FFFFFF;
background-image: url(http://8zk88g.blu.livefilestore.com/...Sr_3GyGJ/2.png);
width:72px;
height:31px;
font-size:14px;
border:none;
background-repeat:repeat-x;
}

Y NO SE EN DONDE PONERLE PLEASE AYUDA, GRACIAS DE ANTEMANO

[nexuxirc]

Saludos

Aqui te paso un codigo mas sencillo:


Este sera para el form dentro de la etiqueta body

<form action="">
   <input type="text" class="input" />
    <input type="password" class="input" />
  <input type="submit" value="Submit" class="button" /> 
  <input type="submit" value="Cancel" class="button" />
</form>

Y este es el codigo CSS para darle formato y imagen a los botones del formulario

.input {
    border: 1px solid #006;
    background: #ffc;
}
.input:hover {
    border: 1px solid #f00;
    background: #ff6;
}
.button {
    border: none;
    background: url('32187231.png') no-repeat top left;
    padding: 2px 8px;
}
.button:hover {
    border: none;
    background: url('downxl.png') no-repeat top left;
    padding: 2px 8px;
}

Donde up.png es la imagen que se vera sin pasar el mouse

32187231.png

Y down.png es la imagen que se vera al pasar el mouse por encima

down.png

Este son los archivos para los botones.




Ojala haya cubierto tu duda.

Cualquier cosa a las ordenes!!