Boton con imagen de fondo en CSS Enero 8, 2007
Publicado por lineadecodigo en : CSS , trackbackEn 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:
.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"/>
<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;
}
Visualizar el ejemplo | Descargar el código
Articulos Similares:
- Fondo estático en una página web
- Definir el tamaño de una imagen con CSS
- Combos con imagenes
- Tooltip, texto al pasar sobre una imágen
- Alineando texto al centro
Enviar entrada por email
| 
Imprimir
| 19200 visitas
(1 votos, media: 1.00 de 5)
Loading ...
Comentarios»
Muy bueno, genial para todos los que estamos haciendo por primera vez una pagina.
Excelente articulo.
para quitar el borde del boton dentro del css
.botonimagen{
…
borde: 0;
}
De hecho para quitar el borde del boton dentro del css sería más bien así:
.botonimagen{
…
border:none;
}
Primero, felicidades por la página. Y luego, creo que no se ve la imagen en Internet Explorer 7. ¿Es posible?
Saludos
es verdad en el internet explorer 7 no se ve el boton
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
muy bacano el codigo, pero en IE7 no se visualiza la imagen,
¿hay algun codigo que permita visualizar la imagen en IE7?
Como hago para que este boton tenga un mouse over ose que tenga otra imagen que se vea al presionar.
Saludos
MG
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.
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?
Excelente Julio, gracias, me quiebro la babeza con estas cosas en el ie
saludos
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
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
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
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)
hola
esta muy chida
Muchisimas Gracias, me sirvió muchisimo..
@Alejandro Santa,
Me alegro que te haya servido.