Boton con imagen de fondo en CSS

08/ene/2007 CSS 26 Comentarios
css

En el articulo de ayer veíamos como se manejaban las imágenes en los botones dentro de XForms. XForms será, esperemos, la evolución de los formularios HTML dentro de XHTML v2. Pero, a día, de hoy, con lo que tenemos que convivir es con HTML + CSS. Es por ello que nos tendremos que apoyar en los atributos de CSS para poder poner imágenes dentro de los botones.

La idea general es utilizar el atributo background-image, el cual pone una imagen de fondo sobre el elemento de la página sobre el que se aplique. Para ello vamos a crear una clase que llamaremos "botonimagen", la cual podremos aplicar sobre cualquier botón de nuestra página.

Lo primero es definir dicha clase, esto lo tenemos que hacer con la etiqueta style. Dicha etiqueta tiene un atributo type. Este atributo sirve para indicarle que estilo va a ir definido dentro de la etiqueta. En nuestro caso será text/css.

El código será el siguiente:

  1. .botonimagen{
  2. background-image:url(imagen.jpg);
  3. }

De este código hay que indicar que el valor del atributo background-image no es directamente el nombre de la imagen, sino que deberemos de utilizar una URL. Es por ello que el nombre de la imagen va después de la función url. Su valor podría ser cualquier dirección de URL donde estuviese la imagen.

Lo siguiente que deberemos de hacer es asignar la clase a un botón. En este punto decir que el lenguaje HTML nos proporciona dos formas de conseguir un botón.

  • Mediante la clase input y el type igual a button
    1. <input type="button" value="Texto del boton"/>
  • Mediante el elemento button
    1. <button value="Texto del boton"></button>

Para aplicar la clase deberemos de utilizar el atributo style. En el caso de escoger la primera de las formas de pintar un botón, la línea de código nos quedaría:

  1. <input type="button" class="botonimagen" value="Texto del boton"/>

En este punto nos encontramos con una serie de inconvenientes. Por ejemplo:

  • El botón se adapta al tamaño del texto, por lo que si la imagen es más grande que el texto, la imagen no se verá en su completitud.
  • La imagen se repite tantas veces como se necesite para llenar el espacio del botón. Esto puede ser un problema si estamos utilizando una imagen pequeña

Para paliar estos efectos y con el fin de que nos quede un botón cual menos, curioso. Podemos jugar con un conjunto de atributos, que son:

  • height, para definir la altura del botón.
  • width, para definir el ancho del botón
  • background-repeat, para identificar el numero de veces que se va a repetir la imagen
  • background-position, posición de la imagen: arriba, abajo, en el centro.

Finalmente el código de la clase nos quedaría de la siguiente forma:

  1. .botonimagen{
  2. background-image:url(imagen.jpg);
  3. background-repeat:no-repeat;
  4. height:100px;
  5. width:100px;
  6. background-position:center;
  7. }

Vídeos sobre CSS

Ningún video coincide

Difunde el Conocimiento

Si te ha gustado el artículo o te ha sido de utilidad, no dejes de compartirlo con tus amigos en las redes sociales... Te estaremos muy agradecidos. :-D

26 comentarios en “Boton con imagen de fondo en CSS”

Víctor Cuervo

Elena

Algo antiguo el post pero muy útil. Gracias!

Víctor Cuervo

rocky

esta concretamente bien explicado!!!

Víctor Cuervo

Robert

Exc…

Víctor Cuervo

ramyro

hola!! una pregunta preguntona jeje
como le puedo hacer para ponerle la imagen de fondo pero que esta se adapte al tamaño del boton??

saludos!!

Víctor Cuervo

andres

Muchas gracias me ayudo un montón.

Víctor Cuervo

lineadecodigo

@Guillermo,

Sí, lo del IE7 estuvo muy bien aportado por @Mayoman.
Gracias por el comentario.

Víctor Cuervo

Guillermo

Muy bueno el explicativo, 10 pts la solución para el IE7. Gracias!

Víctor Cuervo

lineadecodigo

@Alejandro Santa,

Me alegro que te haya servido. :-)

Víctor Cuervo

Alejandro Santa

Muchisimas Gracias, me sirvió muchisimo..

Víctor Cuervo

javier

esta muy chida

Víctor Cuervo

mauricio

hola

Víctor Cuervo

tigladd

Cita de Snider
———————————————————-
Muy bueno,esta bacan las aplicaciones de CSS, mas bien me gustaria saber como quitar los puntos del boton cuando tiene el foco,se puede hacer eso?
———————————————————-

En el CSS poner “a {outline-style:none;}” (sin comillas por supuesto)

Víctor Cuervo

lis

no me funciona el input type”image” para poder guardar el formulario a mi base dedatos utilizando el explorer…..
q hago??????????
neceito q alguin me ayudeeeeeeeeeeee

Víctor Cuervo

lis

no me funciona el input type”image” para poder guardar el formulario a mi base dedatos utilizando el explorer…..
q hago??????????
neceito q alguin me ayudeeeeeeeeeeee

Víctor Cuervo

Mayoman

Funciona en IE7 aplicando cualquier color de fondo, yo uso el gris #CCCCCC.

Esto se debe a que al aplicar un color, el formato estándar del botón se desactiva, dando más libertad al programador de darle la apariencia que desee.

Por cierto esto no es necesario ni en Chrome ni en Safari

Víctor Cuervo

aneaaron

Excelente Julio, gracias, me quiebro la babeza con estas cosas en el ie

saludos

Víctor Cuervo

Snider

Muy bueno,esta bacan las aplicaciones de CSS, mas bien me gustaria saber como quitar los puntos del boton cuando tiene el foco,se puede hacer eso?

Víctor Cuervo

Rodolfo

Hola, para que la imagen de fondo se vea en el IE7 solo agreguen esta linea:

background-color:#FFFFFF;

Sólo le estamos dando un color de fondo, el cual no se ve, pero por algún motivo es necesario indicarlo en IE.

Espero les ayude, saludos.

Víctor Cuervo

Miriam

Como hago para que este boton tenga un mouse over ose que tenga otra imagen que se vea al presionar.
Saludos
MG

Víctor Cuervo

sebastian

muy bacano el codigo, pero en IE7 no se visualiza la imagen,

¿hay algun codigo que permita visualizar la imagen en IE7?

Víctor Cuervo

omayra

realmente estoy iniciando en todo esto de we y quisiera saber si cuando uso la forma de insercion externa en donde defino un archivo con la extension .css los atributos que ustedes asignan en el style yo lo puedo definir como un elemento el style y hacer referencias bueno en fin cualquier cosa q me puedan agregar o que me guie a aprender se los agradecere

Víctor Cuervo

guillermo

es verdad en el internet explorer 7 no se ve el boton

Víctor Cuervo

Pedro

Primero, felicidades por la página. Y luego, creo que no se ve la imagen en Internet Explorer 7. ¿Es posible?
Saludos

Víctor Cuervo

Arturo

De hecho para quitar el borde del boton dentro del css sería más bien así:

.botonimagen{

border:none;
}

Víctor Cuervo

denieru

Excelente articulo.
para quitar el borde del boton dentro del css

.botonimagen{

borde: 0;
}

Víctor Cuervo

ale

Muy bueno, genial para todos los que estamos haciendo por primera vez una pagina.

¿Algo que nos quieras comentar?

Déjanos tu comentario, no te preocupes que tu email no será publicado

*


*