Не работают transition в CSS

<form method="link" action="pages/login.html">
    <input type="submit" class="button" value="LogIn">
</form>

.button {
    width: 200px;
    height: 30px;
    color: #ffffff;
    font-size: 110%;
    font-family: 'Armata', sans-serif;
    margin: 10px 0px 0px 0px;
    border-radius: 5px;
    box-shadow: 0px 2px 15px #333;
    text-shadow: 0px 1px 1px #333;
    background: #b7b7b7;
    background: -moz-linear-gradient(top,  #b7b7b7 1%, #828282 63%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#b7b7b7), color-stop(63%,#828282));
    background: -webkit-linear-gradient(top,  #b7b7b7 1%,#828282 63%);
    background: -o-linear-gradient(top,  #b7b7b7 1%,#828282 63%);
    background: -ms-linear-gradient(top,  #b7b7b7 1%,#828282 63%);
    background: linear-gradient(to bottom,  #b7b7b7 1%,#828282 63%);
 
    transition: background 1s;
}
 
.button:hover {
    background: #00defc;
    background: -moz-linear-gradient(top,  #00defc 0%, #37b8d7 61%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00defc), color-stop(61%,#37b8d7));
    background: -webkit-linear-gradient(top, #00defc 0%,#37b8d7 61%);
    background: -o-linear-gradient(top, #00defc 0%,#37b8d7 61%);
    background: -ms-linear-gradient(top, #00defc 0%,#37b8d7 61%);
    background: linear-gradient(to bottom, #00defc 0%,#37b8d7 61%);
    cursor: pointer;
}