botones animados

Hola en el menu que estoy creando para navegar dentro de la pagina web he creado unos botones para ir a las distintas secciones, mediante photoshop, lo que quiero es que cuando se presiones sobre el boton este cambie su forma sin presionarlo esta para afuera y presionadolo este para dentro. como lo hago? saludos y gracias
Creo que con flash lo podras hacer sin problemas pero no es muy aconsejabre para la indexacion de los enlaces en los buscadores.
http://www.adobe.com/es/products/flashplayer/
Y si utilizas javascript mas o menos lo mismo, lo mejor es utilizar css.
E intentar crearlo en css y con imagenes poniendole el alt, con dos imagenes diferentes pero eso ya no se como, tendras que hacer codigos e imagenes.
Lo mejor es usar CSS, con a y a:hover (alguino de los chicos ya te dice como funcionan , yo te lo explicaria, pero no tengo timepo :S)
si pense hacerlo con imagenes pero cual es el codigo para que aparesca una y luego la otra? saludos
muy facil: El link normal a {background-image: url('direccion-de-la-imagen')}
y para cuando el cursor este encima: a:hover {background-iamge: url('url-de-la-imagen')}
Pero por que lo explique por encia.. Pues eso se aplicara a TODOS LOS LINKS.
Ok como aplico esto:

a {background-image: url('direccion-de-la-imagen')}

a:hover {background-iamge: url('url-de-la-imagen')}

directamente solo a los botones de la barra de menu. Saludos y gracias
haces un grupo de "a" solo para tus menus, puedes hacerlo asi.

asi las caracteristicas del grupo afectan solo a los enlaces que tienes dentro del div menu

#menu a:
#menu a:hover
etc etc

saludos
Hola Yaneth, lo tengo definido como navegacion, entonces en ves de menu puse #navegacion a... pero no pasa nada, si quito la imagen del boton me aparece un rectangulo con una x y cuando paso el raton por encima, si me aparece el segundo boton.

en el HTML escribi esto:

<div id="navegacion"><ul>
<li><a href="videos/videos.html"><img src="boton-nuevo-1.png"width="180" height="50" ></a></li><li><a href="fotografia/fotografia.html"><img src="objetosdos/boton-nuevo-2.png"width="180" height="50" ></a></li><li><a href="equipo_tecnico/equipo_tecnico.html"><img src="objetosdos/boton-nuevo-3.png"width="180" height="50" ></a></li><li><a href="contacto/contacto.html"><img src="objetosdos/boton-nuevo.png"width="180" height="50" ></a></li>

y en es css esto:

#navegacion a{background-image: url(ojbetosdos/boton-nuevo-1.png)}
#navegacion a:hover {background-image: url(objetosdos/boton-31.png)}


Esta bien? o hice cualquier cosa.

Saludos y gracias compañera
Ese rectángulo con una x probablemente es porque la ruta de la imagen está mal, o no has subido la imagen
mmm

veo esto

<li><a href="videos/videos.html"><img src="boton-nuevo-1.png"width="180" height="50" ><

donde está tu boton????¡? no hay carpeta objetos??????
Y el botón lo tienes en esa carpeta?

En ese caso, la carpeta está en el mismo directorio que el index?
si el boton esta en esa carpeta.

lo que no entiendo es lo del mismo directorio del index?

gracias por vuestra ayuda sois unos fenomenos
hola
ya subiste los cambios???
no me queda claro, cuantas carpetas de imagenes tienes??????
(en una sola carpeta, puedes tener todas tus imagenes)

pega aqui, todo tu html y tu css
para ver si hay error en algun otro lado

saludos
Gracias, de carpetas de objetos tengo una para el index donde tengo todas los objetos mira el Html es este:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<meta content="text/html; charset=iso-8859-1" http-equiv=Content-Type>
<title>atinoproducciones</title>
<link rel="stylesheet" href="estilosdos.css"type="text/css" media="all">
</head>

<body>
<div id="global">
<div id="borde-superior"></div>
<div id="cabecera">
<div id="logotipo">
<img src="objetosdos/logo.png" width="270" height="170"
alt="Haz clic aqui para volver a ver la pagina de inicio";>
</div>
<div id="publicidad"><img src="objetosdos/foto-camara.png"width="270" height="170" >
</div>
</div>
<div id="navegacion"><ul>
<li><a href="videos/videos.html"><img src="objetosdos/boton-nuevo-1.png"width="180" height="50"></a></li><li><a href="fotografia/fotografia.html"><img src="objetosdos/boton-nuevo-2.png"width="180" height="50" ></a></li><li><a href="contacto/contacto.html"><img src="objetosdos/boton-nuevo-3.png"width="180" height="50" ></a></li><li><a href="equipo_tecnico/equipo_tecnico.html"><img src="objetosdos/boton-nuevo.png"width="180" height="50" ></a></li>
</ul>
</div>
<h1 class="texto-color">atinoproducciones</h1>
<p class="centrado" "texto-color" >Bienvenidos a atinoproducciones, soy operador de cámara y fotógrafo.</p>
<p class="centrado" "texto-color">También editor de video, fotografía e iluminación de espacios escénicos.</p>
<p class="centrado" "texto-color">Mas de cinco años de experiencia en grabación y montaje de piezas informativas
,actos institucionales,eventos, reportajes culturales y sociales entre otros.</p>
<p class="centrado" "texto-color">Les invito a que visiten mi página, en ella encontraran algunos
de los trabajos que he realizado y los tipos de cámaras y programas de edición
con los que trabajo.
</p>
<p class="centrado"><iframe width="425" height="349" src="http://www.youtube.com/embed/p_y5K2obZCU" frameborder="0" allowfullscreen></iframe></p>
<div id="pie">
<div id="pieuno"><ul>
<li><a href="http://www.facebook.com" target="_blank"><img src="objetosdos/logo-face-espejo.png"width="30" height="30" ></a></li>
</ul>
</div>
<div id ="piedos" class="texto-color">www.atinoproducciones.com</div>
<div id="pietres"><ul>
<li><a href="http://www.youtube.com/user/atinoproducciones" target="_blank"><img src="objetosdos/you-tube-logo-espejo.png"width="50" height="30"></a></li>
</ul>
</div>
</div>

<div id="borde-superior"></div>
</div>

</body>
</html>

y el css es este:

* {margin:0px; padding:0px; border:0px;}
body {text-align:center;background-color:black;background-image:url(objetosdos/lente.png);background-repeat:no-repeat;background-position:center center;}
img {border-style:none;}
#global {width:800px; margin:4px auto;}
#cabecera { border-left:black 1px solid;border-right:black 1px solid; height:85px;}
#borde-superior {background-image:url(objetosdos/borde-superior.png);background-repeat:no-repeat; width:800px; height:12px;}
background-repeat:no-repeat;}
h1 {font-size:2em; color:white; font-weight:bold; text-decoration:none; text-align:center;}
.texto-color {color:white;}
.parrafouno { font-family:Tahoma,Arial,Helvetica,sans-serif ; }
.centrado {text-align:center;}
p {text-align:justify;}
p { margin: 10px 10px 10px 10px; color:white;}
td { background-color:black ; color:white ; padding:20px 10px 20px 10px ; }
#logotipo {width:200px; float:left;}
#publicidad {width:518px; float:right;}
#navegacion { background-color:black; border:black 1px solid; height:20px;}
#navegacion li {float:left; list-style:none;margin:0px 3px 0px 3px;}
#navegacion ul { margin-left:5px }
#navegacion a {background-image:url(ojbetosdos/boton-nuevo-1.png)}
#navegacion a:hover {background-image: url(objetosdos/boton-31.png)}
#contenido {background-color:orange;}
#pie {border-left:black 1px solid; border-right:black 1px solid;border-top:black 1px solid; height:65px;}
#pie li {list-style:none;font-size:12px;}
#pieuno {float:left; width:150px;}
#piedos {float:left; width:498px; background-color:black;}
#pietres {float:left; width:150px;}
#borde-inferior {background-image:url(objetosdos/borde-superior.png);background-repeat: no-repeat ;width:800px ; height: 12px}
a {color:brown; text-decoration:none; display:block;}
a:link {}
a:visited {}
a:hover {color:red; text-decoration:underline; background-color: none;}
a:active {}
ok

me he descargado tus codigos... y el error está en....
mira mejor has la prueba en el html tienes esto

<div id="navegacion"><ul>
<li><a href="videos/videos.html"><img src="objetosdos/boton-nuevo-1.png"width="180" height="50"></a></ul>

agregale cualquier letra, de modo que la imagen te de error
ponle asi

<div id="navegacion"><ul>
<li><a href="videos/videos.html"><img src="objetosdos/botones-nuevo-1.png"width="180" height="50"></a></li>

obiamente no se va a ver la imagen te saldrá un cuadro con la x

ahora si se deben ver las dos imagenes que tienes puestas en el css
es que.. al insertar la imagen en el html
luego como fondo en el css, pues... no se mira.. porque es fondo es decir detrás de la imagen.... me explico??????
haciendo eso que dices me aparece el cuadro con la x en el margen de arriba a la derecha y cuando paso el raton solamente aparece la imagen del boton apretado. ose la imagen dos desapareciendo la primera.
espera ahora si me aparecen los dos pero se mantiene el cadro con la x como lo quito? muchas gracias
es que... ese cuadro con la x... es una imagen que no existe (recuerdas que le cambiamos el bnombre)
yo lo que haria es..... poner solo un texto, o bien... un div vacio, pero me gusta mas lo del texto
asi .... tienes un fondo, para la imagen sin pulsar, un fondo para la imagen pulsada... y un texto (que supongo debe tener texto tu enlace)
puedes jugar con los anchos, poniendole al gurpo de a
pading saludos
ok te entiendo, seria como dejar el boton vacio y en ves de imagen texto con el enlace que tenia la imagen no?