Fondo de botones con CSS3

Fecha: 15 Agosto, 2011 | Autor: | Categoría: CSS3 | 1 Comentario »

Trabajando con Pademobile se me ha presentado una situación bastante habitual en el desarrollo web.

Se trata de ponerle un fondo a un botón con su correspondiente degradado, tal que:

Continuar

Si recibes un PSD como es el caso, lo inmediato es recortarlo y ponerlo de fondo en el submit o elemento correspondiente con el CSS (eliminando todos los detalles):

 
.boton_continuar {
       background: url(boton_continuar.png) no-repeat;
}

El problema de siempre es el ancho fijo. Si necesitas traducir el mensaje es posible que en otro idioma el texto tome más espacio que en el original. Siempre podemos usar un botón con sitio de sobra, pero no queda tan bien.

La solución típica (hasta ahora) ha sido partir el fondo en tres partes, una para cada extremo y una banda que se repite en X con el centro. Pero nos encontramos con los siguientes problemas:

  • Necesitamos usar 3 elementos HTML a los que poner cada uno de los fondos.
  • Perdemos el degradado, ya que los bordes no pueden ser mayores que el propio elemento que los contiene, donde no puede estar el texto.

Ninguno de los efectos es deseable. El CSS3 nos proporciona la solución con los múltiples backgrounds.

Gracias a esta nueva posibilidad del CSS3 podemos poner varios background en un mismo elemento. El CSS necesario es el siguiente (de nuevo ignorando los detalles):

 
.boton_continuar {
  background: url(boton_continuar.png) no-repeat left top;
  background: url(boton_continuar_left.png) no-repeat left top,
              url(boton_continuar_right.png) no-repeat right top,
              url(boton_continuar_center.png) repeat-x left top;
}

Como vemos aquí la solución es simple y satisface todos los requisitos:

Continuar con la operación y a ver si hay suerte

El degradado invade el texto (hasta donde exista claro) ya que los bordes pueden ser del ancho que se desee. Si coinciden con la banda del centro, este se expande conforme lo hace el texto. Pero los bordes siguen con su degradado.

Como detalle dejamos una declaración de background tradicional antes de la múltiple, con el botón completo para que los navegadores antiguos la utilicen (el CSS3 no se entenderá y se usará la previa).


Un comentario en “Fondo de botones con CSS3”

  1. 1 Domingo said at 17:40 on Agosto 16th, 2011:

    …y nosotros encantados!


Haga un comentario