Botones

Como hago para que un boton cambie de color cuando pasas el cursor por encima?

Mi idea es que se muestre este boton en casos normales:
[contenido no disponible]

Y este otro cuando pases el cursor por encima:
[contenido no disponible]


Como se puede hacer esto?

Hola

recuerdas el grupo de las "a"?????

a:
a:link{}

bueno..... pues ahi, es donde pones los botones como imagen de fondo

en

a: {aqui pones el boton tal, cual}
a:hover{aqui pones el que quieres cuando el raton está arriba}

recuerda que debes poner el grupo completo
son 5 "a"

saludos

Antes que nada muchas gracias. Pense que lo habia entendido pero cuando me puse a hacerlo me surgieron varias dudas probe varias cosas pero no me salio xD

Yo tengo esto en la web:

[contenido no disponible]
Sale muy pequeño, si pinchais encima queda a un tamaño visible

Para ello tengo el siguiente codigo en HTML:

<div id="navegacion"><ul>
		     [*][url="#"][img]Botones/Inicio.gif[/img][/url]
          [*][url="#"][img]Botones/El Club.gif[/img][/url]
          [*][url="#"][img]Botones/Plantilla.gif[/img][/url]
          [*][url="#"][img]Botones/Temporada.gif[/img][/url]
          [*][url="#"][img]Botones/Fotos.gif[/img][/url]
          [*][url="#"][img]Botones/Foro.gif[/img][/url]
	        [*][url="#"][img]Botones/Rivales.gif[/img][/url]
          [*][url="#"][img]Botones/Patrocinadores.gif[/img][/url]
          [/list]
	</div>

En la hoja de estilos de dicha capa tengo:

#navegacion {background-color: #1D1D1D; border-bottom: black 1px solid ; border-top: black 1px solid  ; height:24px}
						#navegacion li {float:left ; list-style:none ; margin: 0px 13px 0px 13px }
						#navegacion ul { margin-left: 5px }
						
								  			     #navegacion a {color: white ; text-decoration:none ; display: block }
												 #navegacion a:link    {}
												 #navegacion a:visited {}
												 #navegacion a:hover {color:#FF0000 ; text-decoration:underline}
												 #navegacion a:active  {}

Los botones los tengo guardados como "nombre" el que quiero que salga normal y "nombre2" el que quiero que salga cuando pichas encima. Por ejemplo:

El boton Inicio lo tengo guardado como Inicio.gif e Inicio2.gif

Para hacer lo que me dices que tengo que crear una capa por cada boton, y despues en la hoja de estilos para cada capa definir las "a" de la siguiente manera?

#inicio a {[img]Botones/Inicio.gif[/img]}
#inicio a:link    {}
#inicio a:visited {}
#inicio a:hover {[img]Botones/Inicio2.gif[/img]}
#inicio a:active  {}

Donde me perdi? xD

hola

hacerlo asi, es muy complicado

yo te sugiero que tengas en este caso las dos imagenes de los botones
pero sin el texto
me explico?????,

asi.... pones las imagenes de fondo
y solo necesitarias un grupo de "a" para todos los botones

cualquier duda aqui andamos

saludos

como veo....

los botones serían de diferente tamaño

intenta tener al menos 2 tamaños nada mas

has una medida standar, para que te quepan los textos en las imagenes

saludos

Y como pongo la imagen del boton de fondo? :S

Edito: ya encontre en el tutorial como se ponian imagenes de fondo, ahora a ver si soy capaz de hacer lo que me dices...

Seria algo asi? Esque no consigo que me salga

Hoja de estilos:

		
#navegacion {background-color: #1D1D1D; border-bottom: black 1px solid ; border-top: black 1px solid  ; height:24px}
						#navegacion li {float:left ; list-style:none ; margin: 0px 13px 0px 13px }
						#navegacion ul { margin-left: 5px }

												  		#navegacion a {background-image: url(Botones/Boton.gif); color: white ; text-decoration:none; font-weight: bold }
												 #navegacion a:link    {}
												 #navegacion a:visited {}
												 #navegacion a:hover {background-image: url(Botones/Bonton2.gif); color: white ; text-decoration:none; font-weight: bold }
                                    #navegacion a:active  {}

El codigo HTML sería asi...

	<div id="navegacion"><ul>
		 			[*][url="#"]Inicio[/url]
          [*][url="#"]El Club[/url]
          [*][url="#"]Plantilla[/url]
          [*][url="#"]Temporada[/url]
          [*][url="#"]Fotos[/url]
        [*][url="#"]Foro[/url]
		  [*][url="#"]Rivales[/url]
          [*][url="#"]Patrocinadores[/url]
          [/list]
	</div>

Si

asi es, si gustas darle una checada a mi web
yo hice una plantilla asi

http://unpocodemucho.atwebpages.com/
creo que es la #2

checalo y me avisas

saludos

Yaneth escribió:Si

asi es, si gustas darle una checada a mi web
yo hice una plantilla asi

http://unpocodemucho.atwebpages.com/
creo que es la #2

checalo y me avisas

saludos

Tu web anda caida o almenos no me deja entrar, a ver si lo intento mañana.

Mm que raro, yo si puedo entrar jeje

intenta actualizando o como dices
mañana

saludos

Yaneth escribió:Mm que raro, yo si puedo entrar jeje

intenta actualizando o como dices
mañana

saludos

Hoy pude entrar sin problema y con las indicaciones que me diste y volviendo a ojear el tutorial ya consegui hacer los botones como tenia en mente.

Muchas gracias, a ver si cuando termine la web os la enseño para que me digais fallos :P