Efecto de cambio de color en botones sin imagen

oscarsanchez · #1 (**permalink**) 07/01/2008, 06:34

Hola maestros!
Después de mucho buscar sin éxito, mi duda es la siguiente:

¿Cómo se hace ese boton que consiste en un simple cambio de color cuando pasas el cursor por encima?
Es como una celda con algun atributo que simplemente cambia de color...

Ejemplo 1, en el menu de arriba, además de desplegarse una persiana con información, el propio botón cambia de color: http://www.sun.com/software/solaris/index.jsp

Ejemplo 2, en este mismo foro los Temas de la gente cambian de color segun pasas el cursor.

No sé si me explicado bien, pero GRACIAS de antemano!

JavierB · #2 (**permalink**) 07/01/2008, 06:43

Hola oscarsanchez

La forma más sencilla es con Css:

Código:

<style type="text/css">
  td:hover {color:yellow}
</style>

Pero para que funcione en IE, en versiones anteriores a la 7, tendrías que poner un enlace dentro de la celda:

Código:

<td><a href="algo.html">Enlace</a></td>

Código:

td a {width:100%; display:block}
td a:hover {color:yellow}

Saludos,

oscarsanchez · #3 (**permalink**) 07/01/2008, 06:56

Disculpa! es que soy muy novato y cuando me decis los códigos muchas veces no sé qué hacer con ellos (ni me preguntes como he conseguido hacer mi propia página)...

Los pasos para tontos a seguir en Dreamweaver serían:

1º Selecciono la celda donde quiero el botón.
2º Me voy al codigo y pego en body ésto que me has dicho tal cual:
<style type="text/css">
td:hover {color:yellow}
</style>
3º Por último cambio el color y ya esta ¿no?

¿escribo "yellow" o pongo el numero de la paleta de colores?

DISCULPA Y GRACIAS!!

VOY A PROBARLO YÁ MISMO!!

hades87 · #4 (**permalink**) 07/01/2008, 06:59

las etiquetas de <style> y </style> van incluidas en el head, y en el body solo has de poner el enlace ^^

oscarsanchez · #5 (**permalink**) 07/01/2008, 07:22

Vaya mala pata que tengo.

Yo es que soy fotografo y dibujante... de codigos no tengo ni puñetera idea...

Os agradecería más claridad en la ayuda, seguro que luego es una chorrada.

GRACIAS

hades87 · #6 (**permalink**) 07/01/2008, 08:10

Código HTML:

<html>
<head>
<style type="text/css">  
td:hover {color:yellow}
td a {width:100%; display:block}
td a:hover {color:yellow}
</style>
</head>
<body>
<td><a href="algo.html">Enlace</a></td>
</body>
</html>

seria algo asi :P

Raulmmmm · #7 (**permalink**) 07/01/2008, 08:20

Solo pega este código entre <head> y </head>:
<style type="text/css">
td a {width:100%; display:block}
td a:hover {color:yellow}
</style>
Y pones un enlace en la celda:
<td><a href="algo.html">Enlace</a></td>
Espero que haya quedado claro.

oscarsanchez · #8 (**permalink**) 07/01/2008, 09:01

Gracias!

Aqui hay cada uno que no veas como pilota