Hacer un boton mediante CSS

[Oren]

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.

[PosProdukcion]

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>

[Oren]

Por si el usuario en cuestion tiene javascript deshabilitado. gracias de todas formas.

[kahlito]

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á

[Oren]

gracias!! ahora si funciona.

[clauditalujan]

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