Botones de colores

[Blanck]

Que hay gente. Tengo este problema: estoy haciendo un web, y debajo del banner del header va a haber un menu con custro opciones. Despues de tocar todo (soy medio novato aun) logre que al pasar el puntero sobre las opciones del menu, su fondo cambie del color del theme a otro que yo ponga (puse amarillo, como prueba), es decir esto:

Sin el puntero encima


Con el puntero encima


La cosa es que quiero que cada opcion del menu se ponga de un color diferente, pero no logro hacerlo y siempre me quedan las cuatro del mismo tono. Este es mi code:

En el HTML

Código:

<div id="menu">
        	<ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Sobre Nosotros</a></li>
            <li><a href="#">Servicios</a></li>
            <li><a href="#">Contacto</a></li>
            </ul>
      </div>

En el CSS

Código:

#menu ul {text-align:center;list-style:none; padding:0;}
#menu ul li {display:inline}
#menu ul a { font-weight:bold; font-size:14px; text-decoration:none; color:#fff; background-color:#445d6c; padding:0 10px 2px 10px;}
#menu ul a:hover { background-color:#ffd800;}

[SoyNoob]

La forma mas cencilla de cambiar los colores de los botones es con fireworks
Revisa aqui http://vodpod.com/watch/4234958-crear-menu-boton-con-macromedia-fireworks-gratis

Saludos!

[Blanck]

Esa es buena SoyNoob, pero no tengo firewroks. ¿Hay alguna otra forma?.

[chulifo]

Código HTML:

<div id="menu">
            <ul>
            <li id="iten1"><a href="#">Home</a></li>
            <li id="iten2"><a href="#">Sobre Nosotros</a></li>
            <li id="iten3"><a href="#">Servicios</a></li>
            <li id="iten4"><a href="#">Contacto</a></li>
            </ul>
      </div>
 

Código CSS:

#iten1 a:hover { background-color:#000;}
#iten2 a:hover { background-color:#096;}
#iten3 a:hover { background-color:#F00;}
#iten4 a:hover { background-color:#ffd800;}
 

[Blanck]

¡Muchas gracias chulifo, funciona perfecto!

[jomaruro]

Hola:

No necesitas, a menos que quieres un color distinto para cada opción, definir un id por cada opción, bastará que cambies esto:

Código CSS:

#menu ul li a:hover { background-color:#ffd800;
 

Iniciado por SoyNoob

La forma mas cencilla de cambiar los colores de los botones es con fireworks

¿Y que haces un botón para cada color? ¿Y eso es más sencillo?

Saludos.

[cayeromero]

a mi también me ha servido muchas gracias! pero una pregunta mas como hago para que el color se vaya poco a poco.. ejemplo el navegador de esta web.

http://www.interviewmagazine.com/#

vamos que me gustaria saber como hacer el efecto de estos botones!

MUCHISIMAS GRACIAS!!!