html - 背景色をフェードさせる CSS アニメーション

Question

ボタンの背景色をフェード効果のあるホバー時に別の色に変更する方法はありますか? これは javascript で実行できることはわかっていますが、これには css のみを使用したいと思います。

Answer 1

CSS3 トランジション プロパティが解決策です。

.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;  
}

Answer 2

このcssを試してみてください、

button{background-color:#888;}
button:hover{background-color:#CCC;}
​

HTMLは、

<button>Test</button>​

作業コード: http://jsfiddle.net/HJmK9/