Foros del Web » Creando para Internet » HTML »

Efecto de cambio de color en botones sin imagen

Estas en el tema de Efecto de cambio de color en botones sin imagen en el foro de HTML en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 07/01/2008, 06:34
Avatar de oscarsanchez  
Fecha de Ingreso: noviembre-2007
Ubicación: Portugal
Mensajes: 42
Antigüedad: 10 años
Puntos: 0
Pregunta Efecto de cambio de color en botones sin imagen

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!
  #2 (permalink)  
Antiguo 07/01/2008, 06:43
Avatar de JavierB
Colaborador
 
Fecha de Ingreso: febrero-2002
Ubicación: Madrid
Mensajes: 25.052
Antigüedad: 15 años, 9 meses
Puntos: 771
Re: Efecto de cambio de color en botones sin imagen

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,
  #3 (permalink)  
Antiguo 07/01/2008, 06:56
Avatar de oscarsanchez  
Fecha de Ingreso: noviembre-2007
Ubicación: Portugal
Mensajes: 42
Antigüedad: 10 años
Puntos: 0
Re: Efecto de cambio de color en botones sin imagen

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!!
  #4 (permalink)  
Antiguo 07/01/2008, 06:59
Avatar de hades87  
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona - España
Mensajes: 3.194
Antigüedad: 10 años
Puntos: 68
Re: Efecto de cambio de color en botones sin imagen

las etiquetas de <style> y </style> van incluidas en el head, y en el body solo has de poner el enlace ^^
  #5 (permalink)  
Antiguo 07/01/2008, 07:22
Avatar de oscarsanchez  
Fecha de Ingreso: noviembre-2007
Ubicación: Portugal
Mensajes: 42
Antigüedad: 10 años
Puntos: 0
No lo consigo...

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
  #6 (permalink)  
Antiguo 07/01/2008, 08:10
Avatar de hades87  
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona - España
Mensajes: 3.194
Antigüedad: 10 años
Puntos: 68
Re: Efecto de cambio de color en botones sin imagen

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
  #7 (permalink)  
Antiguo 07/01/2008, 08:20
Avatar de Raulmmmm  
Fecha de Ingreso: marzo-2007
Ubicación: En otro lugar que tú
Mensajes: 1.549
Antigüedad: 10 años, 8 meses
Puntos: 36
Re: Efecto de cambio de color en botones sin imagen

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.
  #8 (permalink)  
Antiguo 07/01/2008, 09:01
Avatar de oscarsanchez  
Fecha de Ingreso: noviembre-2007
Ubicación: Portugal
Mensajes: 42
Antigüedad: 10 años
Puntos: 0
Gracias

Gracias!

Aqui hay cada uno que no veas como pilota
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




La zona horaria es GMT -6. Ahora son las 01:40.