ejemplo - html input button css

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

Question

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, lo 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 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.

Answer 1

Aquí hay una solución más simple pero sin div adicional que lo rodea:

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

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:

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

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 3

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

Answer 4

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

Answer 5

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

Answer 6

Puede usar blank.gif (imagen transparente 1px) 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;}

Answer 7

Puede usar la etiqueta <button> . 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/

Answer 8

Quizás también puedas importar un archivo .js y tener el reemplazo de la imagen allí, en JavaScript.

Answer 9

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 10

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!

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

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.