Foros del Web » Creando para Internet » CSS »

Hacer un boton mediante CSS

Estas en el tema de Hacer un boton mediante CSS en el foro de CSS en Foros del Web. Hola, Vereis, quiero hacer un boton mediante css, esto es, tengo una imagen que es el boton inactivo, y otra con el boton activo (cuando ...
  #1 (permalink)  
Antiguo 10/10/2007, 02:57
 
Fecha de Ingreso: enero-2007
Mensajes: 78
Antigüedad: 10 años, 10 meses
Puntos: 2
Hacer un boton mediante CSS

Hola,

Vereis, quiero hacer un boton mediante css, esto es, tengo una imagen que es el boton inactivo, y otra con el boton activo (cuando se pase el raton por encima). Ahora bien, en la hoja de estilos tengo algo asi:

Código:
#boton a {
	background: url(boton1.png);
	width: 86px;
	height: 23px;
}
	
#boton a:hover {
	background: url(boton2.png);
	width: 86px;
	height: 23px; 
}
Y en el codigo esto:

Código:
	<div id="boton"><a href="index.php?loquesea"><span>Mi accion</span></a></div>
span lo tengo puesto para que sea invisible. Ahora el problema: El boton no se muestra completamente, si no solo la parteque ocuparia lo de dentro de span ("Mi accion"). es decir, se ve casi todo el boton horizontalmente, y verticalmente le falta un trozito.

¿Como se le dice a CSS que quiero que el enlace sea todo el tamaño de la imagen del boton?

Muchas Gracias.
  #2 (permalink)  
Antiguo 10/10/2007, 05:04
Avatar de PosProdukcion  
Fecha de Ingreso: noviembre-2004
Ubicación: Manzanares el Real (Madrid)
Mensajes: 726
Antigüedad: 13 años
Puntos: 9
Re: Hacer un boton mediante CSS

Por que no pones la imagen "dentro" del <a> y cambias la imagen con javascript a traves de onmousover y onmouseout???

Código:
  <script languaje="javascript">
  function changeImg(img, path)
  {
    img.src = path;
  }
   </script>

<a href="index.php?loquesea"><img src="boton1.png" onMouseOver="changeImg(this, 'boton2.png')" onMouseOut="changeImg(this, 'boton1.png')"/></a>
  #3 (permalink)  
Antiguo 10/10/2007, 08:19
 
Fecha de Ingreso: enero-2007
Mensajes: 78
Antigüedad: 10 años, 10 meses
Puntos: 2
Re: Hacer un boton mediante CSS

Por si el usuario en cuestion tiene javascript deshabilitado. gracias de todas formas.
  #4 (permalink)  
Antiguo 12/10/2007, 18:59
Avatar de kahlito
Colaborador
 
Fecha de Ingreso: marzo-2003
Ubicación: En el Estrecho y el mar
Mensajes: 2.893
Antigüedad: 14 años, 9 meses
Puntos: 60
Re: Hacer un boton mediante CSS

Hola Oren.

Prueba por ejemplo así:

Código HTML:
#boton a {
	background: url(boton1.png);
	width: 86px;
	height: 23px;
        display:block;
}
	
#boton a:hover {
	background: url(boton2.png);
	width: 86px;
	height: 23px; 
        display:block;
}
Si añades display:block; ya te irá

  #5 (permalink)  
Antiguo 13/10/2007, 14:10
 
Fecha de Ingreso: enero-2007
Mensajes: 78
Antigüedad: 10 años, 10 meses
Puntos: 2
Re: Hacer un boton mediante CSS

gracias!! ahora si funciona.
  #6 (permalink)  
Antiguo 08/12/2011, 10:44
 
Fecha de Ingreso: julio-2011
Ubicación: Rosario
Mensajes: 2
Antigüedad: 6 años, 4 meses
Puntos: 0
Respuesta: Hacer un boton mediante CSS

muchas gracias!! todavia no porbé si funciona o no pero igual agradezco
Quiero comenzar a hacer todo los sitios con css 3 y html ... y luego con html5 y css4
gracias
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 20:51.