CSS3 Couleur Transition sur le bouton

Question

Je ne peux pas sembler obtenir mon bouton pour changer de couleur avec les transitions CSS3. J'ai réussi à utiliser le même code sur le rond-point et les balises, mais pas de chance avec le bouton.

Voici le code:

.button { 
    position:absolute; 
    width: 135px; 
    height: 46px; 
    background-color: #ef6529; 
    text-decoration: none; 
    border-radius: 4px; 
    -moz-border-radius: 4px; 
    border: 1px solid #c33b00; 
    box-shadow: 0px 4px 0px #af5a5a; 
    -moz-box-shadow: 0px 4px 0px #af5a5a; 
    -webkit-box-shadow: 0px 4px 0px #af5a5a; 
    -webkit-transition:color 1s ease-in; 
    -moz-transition:color 1s ease-in; 
    -o-transition:color 1s ease-in; 
    transition:color 1s ease-in; 
} 

.button:hover { 
    width: 135px; 
    height: 46px; 
    background-color: #ff6726; 
    border-radius: 4px; 
    -moz-border-radius: 4px; 
    border: 1px solid #c33b00; 
    text-decoration: none; 
} 

et le code HTML:

<a href="#" class="button"> 
    <!--<h2>PUSH ME!</h2>--> 
</a> 

Cheers!

Answer 1

Vous n'avez pas spécifié de couleurs pour le bouton. Je suppose que vous voulez faire la transition de la couleur d'arrière-plan. Remplacez transition:color 1s ease-in; par transition: background-color 1s ease-in;.