¿Cómo cambiar una imagen de botón de entrada usando CSS?

Entonces, puedo crear un botón de entrada con una imagen usando

<INPUT type="image" src="/images/Btn.PNG" value="">

Pero no puedo obtener el mismo comportamiento usando CSS. Por ejemplo, he intentado

<INPUT type="image" class="myButton" value="">

donde "myButton" se define en el archivo CSS como

.myButton {
    background:url(/images/Btn.PNG) no-repeat;
    cursor:pointer;
    width: 200px;
    height: 100px;
    border: none;
}

Si eso es todo lo que quería hacer, podría usar el estilo original, pero quiero cambiar la apariencia del botón al pasar el mouse (usando una myButton:hoverclase). Sé que los enlaces son buenos, porque he podido cargarlos para una imagen de fondo para otras partes de la página (solo como un cheque). Encontré ejemplos en la web de cómo hacerlo usando JavaScript, pero estoy buscando una solución CSS.

Estoy usando Firefox 3.0.3 si eso hace la diferencia.

Si desea darle estilo al botón usando CSS, conviértalo en un botón type = "submit" en lugar de type = "image". type = "image" espera un SRC, que no puede establecer en CSS.

Tenga en cuenta que Safari no le permitirá diseñar ningún botón de la manera que está buscando. Si necesita soporte de Safari, deberá colocar una imagen y tener una función onclick que envíe el formulario.

Puedes usar la <button>etiqueta. Para un envío, simplemente agregue type="submit". Luego use una imagen de fondo cuando desee que el botón aparezca como un gráfico.

Al igual que:

<button type="submit" style="border: 0; background: transparent">
    <img src="/images/Btn.PNG" width="90" height="50" alt="submit" />
</button>

Más información: http://htmldog.com/reference/htmltags/button/

HTML

<div class="myButton"><INPUT type="submit" name="" value=""></div>

CSS

div.myButton input {
    background:url(/images/Btn.PNG) no-repeat;
    cursor:pointer;
    width: 200px;
    height: 100px;
    border: none;
}

Esto funcionará en cualquier lugar, incluso en Safari.

Este artículo sobre el reemplazo de imágenes CSS para los botones de envío podría ayudar.

"Con este método, obtendrá una imagen en la que se puede hacer clic cuando las hojas de estilo estén activas y un botón estándar cuando las hojas de estilo estén desactivadas. El truco consiste en aplicar los métodos de reemplazo de imagen a una etiqueta de botón y usarlo como botón de envío, en lugar de usando la entrada.

Y dado que los bordes de los botones se borran, también es recomendable cambiar el cursor del botón a uno en forma de mano que se utiliza para los enlaces, ya que esto proporciona una sugerencia visual para los usuarios ".

El código CSS:

#replacement-1 {
  width: 100px;
  height: 55px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent url(image.gif) no-repeat center top;
  text-indent: -1000em;
  cursor: pointer; /* hand-shaped cursor */
  cursor: hand; /* for IE 5.x */
}

#replacement-2 {
  width: 100px;
  height: 55px;
  padding: 55px 0 0;
  margin: 0;
  border: 0;
  background: transparent url(image.gif) no-repeat center top;
  overflow: hidden;
  cursor: pointer; /* hand-shaped cursor */
  cursor: hand; /* for IE 5.x */
}
form>#replacement-2 { /* For non-IE browsers*/
  height: 0px;
}

Aquí hay una solución más simple pero sin un div circundante adicional:

<input type="submit" value="Submit">

El CSS utiliza una técnica básica de reemplazo de imágenes. Para puntos de bonificación, se muestra usando un sprite de imagen:

<style>
    input[type="submit"] {
        border: 0;
        background: url('sprite.png') no-repeat -40px left;
        text-indent: -9999em;
        line-height:3000;
        width: 50px;
        height: 20px;
    }
</style>

Fuente: http://work.arounds.org/issue/21/using-css-sprites-with-input-type-submit-buttons/

Esto es lo que funcionó para mí en Internet Explorer, una ligera modificación a la solución de Philoye.

>#divbutton
{
    position:relative;
    top:-64px;
    left:210px;
    background: transparent url("../../images/login_go.png") no-repeat;
    line-height:3000;
    width:33px;
    height:32px;
    border:none;
    cursor:pointer;
}

Puede usar blank.gif (imagen transparente de 1 px) como objetivo en su etiqueta

<input type="image" src="img/blank.gif" class="button"> 

y luego estilo de fondo en css:

.button {border:0;background:transparent url("../img/button.png") no-repeat 0 0;}
.button:hover {background:transparent url("../img/button-hover.png") no-repeat 0 0;}

Una variación de las respuestas anteriores. Descubrí que es necesario establecer la opacidad, por supuesto, esto funcionará en IE6 y en adelante. Hubo un problema con la solución de altura de línea en IE8 donde el botón no respondía. ¡Y con esto también obtienes un cursor de mano!

<div id="myButton">
  <input id="myInputButton" type="submit" name="" value="">
</div>

#myButton {
 background: url("form_send_button.gif") no-repeat;
 width: 62px;
 height: 24px;
 }

#myInputButton { 
 background: url("form_send_button.gif") no-repeat;
 opacity: 0;
 -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
 filter: alpha(opacity=0);
 width: 67px;
 height: 26px;
 cursor: pointer;
 cursor: hand;
}

Creo que la siguiente es la mejor solución:

css:

.edit-button {
    background-image: url(edit.png);
    background-size: 100%;
    background-repeat:no-repeat;
    width: 24px;
    height: 24px;
}

html:

<input class="edit-button" type="image" src="transparent.png" />

Mi solución sin js y sin imágenes es esta:

* HTML:

<input type=Submit class=continue_shopping_2 
name=Register title="Confirm Your Data!" 
value="confirm your data">

* CSS:

.continue_shopping_2:hover{
background-color:#FF9933;
text-decoration:none;
color:#FFFFFF;}


.continue_shopping_2{
padding:0 0 3px 0;
cursor:pointer;
background-color:#EC5500;
display:block;
text-align:center;
margin-top:8px;
width:174px;
height:21px;
border-radius:5px;
border-width:1px;
border-style:solid;
border-color:#919191;
font-family:Verdana;
font-size:13px;
font-style:normal;
line-height:normal;
font-weight:bold;
color:#FFFFFF;}

Quizás también podría importar un archivo .js y reemplazar la imagen allí, en JavaScript.

Supongamos que no puede cambiar el tipo de entrada, o incluso el src. SOLO tienes CSS para jugar.

Si conoce la altura que desea y tiene la URL de una imagen de fondo que desea utilizar, tiene suerte.

Establezca la altura en cero y padding-top en la altura que desee. Eso empujará la imagen original fuera de la vista, dándole un espacio perfectamente limpio para mostrar su imagen de fondo css.

Funciona en cromo. No tengo idea si funciona en IE. Casi nada inteligente lo hace, así que probablemente no.

#daft {
  height: 0;
  padding-top: 100px;
  width: 100px;
  background-image: url(clever.jpg);
}

<input type="image" src="daft.jpg" id="daft">