feed twitter facebook LinkedIn facebook

CSS » Boton con imagen de fondo en CSS

enero 8, 2007 por Víctor Cuervo 26 Comentarios Imprimir Imprimir

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

Visualizar el ejemplo | Descargar el código

tags:

Artículos relacionados:

26 comentarios »

RSS feed para los comentarios de esta entrada.TrackBack URI

1 2 3
  1. ale
    julio 24, 2007 #

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

  2. denieru
    diciembre 11, 2007 #

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

    .botonimagen{

    borde: 0;
    }

  3. Arturo
    enero 10, 2008 #

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

    .botonimagen{

    border:none;
    }

  4. Pedro
    enero 10, 2008 #

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

  5. guillermo
    febrero 1, 2008 #

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

  6. omayra
    febrero 6, 2008 #

    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

  7. sebastian
    junio 4, 2008 #

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

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

  8. Miriam
    junio 13, 2008 #

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

  9. Rodolfo
    julio 5, 2008 #

    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.

  10. Snider
    agosto 17, 2008 #

    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?

1 2 3

Deja un comentario

XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

*