Les effets de survol

Bonjour,

je souhaiterais que lorsque je met la souris sur le bouton , background-color et color s'inverse mais ca ne marche pas avec mon code et je ne comprends pas pourquoi.
lorsque je met la souris sur le boutton, je vois juste la couleur de la fonction color.

mon code:

a.button { 
 border-radius: 8px; 
 -moz-border-radius: 8px; 
 -webkit-border-radius: 8px; 
 behavior: url(js/PIE.htc); 
 position: relative; 
 box-shadow: 1px 1px 0px rgba(0, 0, 0, .4); 
 -moz-box-shadow: 1px 1px 0px rgba(0, 0, 0, .4); 
 -webkit-box-shadow: 1px 1px 0px rgba(0, 0, 0, .4); 
 padding: 3px 0px 0px 0px; 
 background-color: #a10d23; 
 display:inline-block; 
 width:104px; 
 height:24px; 
 text-align:center; 
 margin:24px 0 0 8px; 
 text-decoration:none; 
 color:#f7ca5e; 
 font-size:1.166em; 
 line-height:1.2307em; 
} 

 a.button:hover { 
  padding: 3px 0px 0px 0px; 
  background-color: #f7ca5e; 
  display:inline-block; 
  width:104px; 
  height:24px; 
  text-align:center; 
  margin:24px 0 0 8px; 
  text-decoration:none; 
  color:#a10d23; 
  font-size:1.166em; 
  line-height:1.2307em; 
 }

merci d'avance de votre aide