css3 button background color infinito transition

Question

C'è un modo per far sfumare il colore di sfondo di un pulsante dal grigio al blu e poi tornare al grigio usando solo css3? Un buon esempio è un pulsante di azione predefinito è il cacao? So che questo può essere fatto in javascript, ma preferisco usare solo CSS per questo.

Answer 1

Hi Ho fatto il pulsante attraverso l'animazione CSS3 si prega di avere sguardo spero il suo vicino alla tua domanda: -

HTML

<input type="submit" value="submit" class="button" /> 

CSS

.button { 
    width:100px; 
    height:20px; 
    background:red; 
    animation:myfirst 5s; 
    -moz-animation:myfirst 5s infinite; /* Firefox */ 
    -webkit-animation:myfirst 5s infinite; /* Safari and Chrome */ 
} 

@-moz-keyframes myfirst /* Firefox */ { 
    0% {background:red;} 
    50% {background:yellow;} 
    100% {background:red;} 
} 

@-webkit-keyframes myfirst /* Safari and Chrome */ { 
    0% {background:red;} 
    50% {background:yellow;} 
    100% {background:red;} 
} 

vedere la demo: - http://jsbin.com/osohak/7/edit

Per saperne di più CSS3 Transitions & Animazione http://css3.bradshawenterprises.com/cfimg/

Answer 2

Se avete bisogno di dissolvenza animazione sulla hover o cose del genere, CSS3 transition property è la vostra soluzione.

EDIT:

.btn { 
    background-color: lightblue; 
    -webkit-transition: all 0.3s ease-out; /* Saf3.2+, Chrome */ 
    -moz-transition: all 0.3s ease-out; /* FF4+ */ 
     -ms-transition: all 0.3s ease-out; /* IE10 */ 
     -o-transition: all 0.3s ease-out; /* Opera 10.5+ */ 
      transition: all 0.3s ease-out; 
} 

.btn:hover { 
    background-color: lightgreen; 
}