Transitions CSS3

[larsvdvoorden]

Halllo Helpmijers,

Ik heb een vraag over de transisions in CSS3.

in mijn index.html staat:

<div class="main">
		<img src="logo.png" id="logo">
		<div id="header">
			<img src="banner001.jpg" id="banner">
		</div>
		<div id="menu">
			<a href="index.html"><div class="button">Home</div></a>
			<a href="https://gmail.com/"><div class="button">Mail</div></a>
			<a href="https://www.google.com/calendar/b/0/render"><div class="button">Agenda</div></a>		
			<a href="https://picasaweb.google.com/home"><div class="button">Foto's</div></a>
			<a href="#"><div class="button" id="school">school</div></a>
		</div>	
	</div>

en mijn style.css:

.button
{
	border: 3px solid rgb(200,200,200);
	border-radius:4px;
	float:left;
	margin-right:80px;
	margin-top:5px;
	
	
	font-family:Verdana;
	background-color:rgb(225,225,225);
	color:rgb(100,100,100);
	
		
	transition: color 1s;
	-moz-transition: color 1s; /* Firefox 4 */
	-webkit-transition: color 1s; /* Safari and Chrome */
	-o-transition: color 1s; /* Opera */

}

.button:hover
{
	color:rgb(245,103,9);
}

Het is de bedoeling, dat de tekst in de buttons met 1seconde veranderd zijn van grijs in oranje. Helaas werkt dit niet.

Weet iemand hoe ik dit kan verhelpen.