Artículos
CSS

Botón con imagen de fondo en CSS

08/Ene/2007

En el articulo de ayer veíamos cómo 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 crear un botón con imagen de fondo en CSS.

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 el atributo style. Dicho elemento tiene un atributo type. Este atributo sirve para indicarle qué estilo va a ir definido dentro de la etiqueta. En nuestro caso será text/css.

El código será el siguiente:

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

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

<input type="button" value="Texto del boton">

Mediante el elemento button

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

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

.botonimagen{
  background-image:url(imagen.jpg);
  background-repeat:no-repeat;
  height:100px;
  width:100px;
  background-position:center;
}

De esta forma ya habremos conseguido crear un botón con imagen de fondo en CSS. Espero que os haya sido de utilidad.

Código Fuente

Descárgate el código fuente de Botón con imagen de fondo en CSS
Y si te ha gustado nuestro código fuente puedes regalarnos una estrella Star

Test CSS

¿Te atreves a probar tus habilidades y conocimiento en CSS con nuestro test?

Test CSS
Suscribir
Notificar de
guest
27 Comentarios
Recientes
Anteriores Más votados
Opiniones integradas
Ver todos los comentarios