title: css3 ( transition ) not working
body: <p>I am trying to change the background and text color with the css3 transition effects when hovering over a button, but only the text color is changing and not the background color. Here is my jsfiddle <a href="http://jsfiddle.net/sureshpattu/HjvmY/" rel="nofollow">code</a>   and here is my css : </p>
  
  <pre><code>.input-submit
  {
      margin: 12px 0 2px
      background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(255, 255, 255)), to(rgb(224, 224, 224)));
      background-image: -webkit-linear-gradient(top, rgb(255, 255, 255), rgb(224, 224, 224));
      background-image: -moz-linear-gradient(top, rgb(255, 255, 255), rgb(224, 224, 224));
      background-image: -o-linear-gradient(top, rgb(255, 255, 255), rgb(224, 224, 224));
      background-image: linear-gradient(top, rgb(255, 255, 255), rgb(224, 224, 224));
      -webkit-box-shadow: inset 0 1px 0 #fff, 0 1px 3px rgba(0,0,0,.5);
      -moz-box-shadow: inset 0 1px 0 #fff, 0 1px 3px rgba(0,0,0,.5);
      box-shadow: inset 0 1px 0 #fff, 0 1px 3px rgba(0,0,0,.5);
      border: 0;
      font-weight: normal;
      color: #333;
      text-shadow: 0 1px 0 white;
      border-radius: 5px;
      -moz-border-radius: 5px;
      padding: 5px;
      width: 60px;
      border-image: initial;
      -webkit-transition: all 1s ease-in-out;
      -moz-transition: all 1s ease-in-out;
      -o-transition: all 1s ease-in-out;
      -ms-transition: all 1s ease-in-out;
      transition: all 1s ease-in-out;
  
  }
  
  .input-submit:hover
  {
      cursor:pointer;
      margin: 12px 0 2px;
      background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(145, 191, 1)), to(rgb(111, 149, 1)));
      background-image: -webkit-linear-gradient(top, rgb(145, 191, 1), rgb(111, 149, 1));
      background-image: -moz-linear-gradient(top, rgb(145, 191, 1), rgb(111, 149, 1));
      background-image: -o-linear-gradient(top, rgb(145, 191, 1), rgb(111, 149, 1));
      background-image: linear-gradient(top, rgb(145, 191, 1), rgb(111, 149, 1));
      -webkit-box-shadow: inset 0 1px 0 #fff, 0 1px 3px rgba(0,0,0,.5);
      -moz-box-shadow: inset 0 1px 0 #fff, 0 1px 3px rgba(0,0,0,.5);
      box-shadow: inset 0 1px 0 #fff, 0 1px 3px rgba(0,0,0,.5);
      border: 0;
      font-weight: normal;
      color: #fff;
      text-shadow: 0 1px 0 white;
      border-radius: 5px;
      -moz-border-radius: 5px;
      padding: 5px;
      width: 60px;
      border-image: initial;
      -webkit-transition: all 1s ease-in-out;
      -moz-transition: all 1s ease-in-out;
      -o-transition: all 1s ease-in-out;
      -ms-transition: all 1s ease-in-out;
      transition: all 1s ease-in-out;
  
  }
  </code></pre>