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

Question

Por lo tanto, puedo crear un botón de entrada con una imagen usando

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

Pero, no puedo conseguir 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, yo podría utilizar el estilo original, pero quiero para cambiar la apariencia del botón en vuelo estacionario (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.

Answer 1

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.

Answer 2

Este artículo acerca de CSS image replacement for submit buttons podría ayudar.

"Al usar este método obtendrá 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 usarlo como botón de enviar, en lugar de usar la entrada

Y como se borran los bordes de los botones, también es recomendable cambiar el cursor del botón a la forma en forma de mano usada para enlaces, ya que 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; 
} 

Answer 3

Usted puede utilizar la etiqueta <button>. Para enviar, simplemente agregue type="submit". Luego use una imagen de fondo cuando desee que el botón aparezca como un gráfico.

así:

<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/

Answer 4

Tal vez usted podría importar un archivo .js, así y tener la sustitución de la imagen allí, en JavaScript.

Answer 5

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.

Answer 6

Aquí es una solución más simple, pero sin div que rodea extra:

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

El CSS utiliza una técnica de reemplazo de imagen básica. Para los puntos de bonificación, que muestra el uso de 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/

Answer 7

Aquí es lo que funcionó para mí en el Internet Explorer, una ligera modificación a la solución por 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; 
} 

Answer 8

Puede utilizar blank.gif (imagen transparente de 1 píxel) como destino en su etiqueta

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

y entonces fondo estilo 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;} 

Answer 9

Una variación en 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!

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

Answer 10

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" /> 

Answer 11

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

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