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

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

 

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

  

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 myButton:hover (usando una clase myButton:hover ). Sé que los enlaces son buenos, porque he podido cargarlos como imagen de fondo para otras partes de la página (solo como un control). Encontré ejemplos en la web de cómo hacerlo usando JavaScript, pero estoy buscando una solución de CSS.

Estoy usando Firefox 3.0.3 si eso hace la diferencia.

Si quiere darle un estilo al botón usando CSS, conviértalo en un tipo = botón “enviar” en lugar de tipo = “imagen”. type = “image” espera un SRC, que no se puede configurar en CSS.

Tenga en cuenta que Safari no le permitirá configurar 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.

Puede usar la 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:

  

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

HTML

 

CSS

 div.myButton input { background:url(https://stackoverflow.com/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 enviar botones podría ayudar.

“Con este método obtendrás una imagen clicable cuando las hojas de estilo estén activas, y un botón estándar cuando las hojas de estilo estén desactivadas. El truco es aplicar los métodos de reemplazo de imagen a una etiqueta de botón y usarla como el botón Enviar, 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 por uno con forma de mano utilizado para los enlaces, ya que esto proporciona una sugerencia visual a 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 div adicional que lo rodea:

  

El CSS usa una técnica básica de reemplazo de imágenes. Para los puntos de bonificación, muestra el uso de un sprite de imagen:

  

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

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

  

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 la opacidad debe establecerse, 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!

 
#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; }

Esto es lo que funcionó para mí en Internet Explorer, una pequeña modificación de 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; } 

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:

  

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

* HTML:

  

* 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 puedas importar un archivo .js y tener el reemplazo de la imagen allí, en JavaScript.