0

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 code and here is my css : 

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

}
mowwwalker
  • 16,634
  • 25
  • 104
  • 157
Suresh Pattu
  • 6,083
  • 16
  • 59
  • 91
  • 1
    Works for me... edit: Oh, I see. It's not transitioning... – mowwwalker Jan 24 '12 at 05:37
  • Alex appears to be right, see the answer the user gave for this question: http://stackoverflow.com/questions/3790273/webkit-support-for-gradient-transitions – mowwwalker Jan 24 '12 at 05:43

1 Answers1

2

That's quite a block of CSS you've got there! As far as I'm aware, no browsers allow transitions of css gradients yet. Since your backgrounds aren't solid colors, you can't transition them.

Alex Lande
  • 1,280
  • 11
  • 11