css hover background-color not working when gradient exists

Question

If I leave out the 5 background-image gradient lines (below), button color successfully changes on hover. But if I leave them in, shadow continues to work on hover but not the background-color. Any ideas?

.buttonlink:link, .buttonlink:visited {
    background-color: #557fff;                          /* For browsers that do not support gradients */
    background-image: -moz-linear-gradient(top,#08c,#04c);  /* Firefox 3.6-15*/
    background-image: -webkit-gradient(linear,0 0,0 100%,from(#08c),to(#04c));
    background-image: -webkit-linear-gradient(top,#08c,#04c);   /* For Chrome 25 and Safari 6, iOS 6.1, Android 4.3 */
    background-image: -o-linear-gradient(top,#08c,#04c);        /* Opera 11.1-12 */
    background-image: linear-gradient(to bottom,#08c,#04c); /* Standard, must be last */
    color: white;
    width:125px;
    height:25px;
    text-align: center;
    text-decoration: none;
    text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
    display: inline-block;
    border: 2px solid #0055ff;
    border-radius: 5px;
}

.buttonlink:hover, .buttonlink:active {
    background-color: #E2AD27;
    box-shadow: 5px 5px 5px #888888;
}

MassDebates kindly created an example that works. I also created an example in jsfiddle and that works too. Is something else in my css file overriding it? Here is the full css:

body {
        height: 100%;
        line-height: 25px;
        font-size: 13px;
}

.infoReset {
        border-width: 1px;
        border-style: solid;
        border-color: #858585;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        background-color: #FFFFFF;
        /**behavior: url(PIE.htc);**/
        box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
        transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;
        -pie-poll: true;
        position: relative;
        width: 250px;
}

.auditLogSearch {
    border-width: 1px;
    border-style: solid;
    border-color: #858585;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background-color: #FFFFFF;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
    transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;
    -pie-poll: true;
    position: relative;
    width: 100px;
}

#FromDatePicker, #ToDatePicker {
    width: 75px;
}

input[type="text"]:FOCUS,input[type="password"]:FOCUS,select:FOCUS,textarea:FOCUS {
        border: 1px solid #52A8EC !important;
        box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px
                rgba(82, 168, 236, 0.6);
        outline: 0 none;
        /**behavior: url(PIE.htc);**/
        -pie-poll: true;
        position: relative;
}

input[textarea] {

        resize: none;
}

#page-wrapper {
        width: 800px;
        min-width: 800px;
        min-height: 500px;
        clear: both;
        margin: 0 auto;
}

#audit-wrapper {
    width: 1000px;
    min-width: 1000px;
    min-height: 500px;
    clear: both;
    margin: 0 auto;
}

hr {
    border: 2px solid #000;
}

.hidden {
     display: none;
}

#auditTable {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    border-collapse: collapse;
    width: 70%;
}

#auditTable td, #auditTable th {
    border: 1px solid #ddd;
    text-align: left;
    padding: 3px;
}

#auditTable tr:nth-child(even){background-color: #f2f2f2}

#auditTable tr:hover {background-color: #ddd;}

#auditTable th {
    padding-top: 8px;
    padding-bottom: 8px;
    background-color: #4CAF50;
    color: white;
}

.buttonlink:link, .buttonlink:visited {
    background-color: #557fff;                          /* For browsers that do not support gradients */
    background-image: -moz-linear-gradient(top,#08c,#04c);  /* Firefox 3.6-15*/
    background-image: -webkit-gradient(linear,0 0,0 100%,from(#08c),to(#04c));
    background-image: -webkit-linear-gradient(top,#08c,#04c);   /* For Chrome 25 and Safari 6, iOS 6.1, Android 4.3 */
    background-image: -o-linear-gradient(top,#08c,#04c);        /* Opera 11.1-12 */
    background-image: linear-gradient(to bottom,#08c,#04c); /* Standard, must be last */
    color: white;
    width:125px;
    height:25px;
    text-align: center;
    text-decoration: none;
    text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
    display: inline-block;
    border: 2px solid #0055ff;
    border-radius: 5px;
}

.buttonlink:hover, .buttonlink:active {
    background-image: -moz-none;
    background-image: -webkit-none;
    background-image: -webkit-none;
    background-image: -o-none;
    background-image:none;
    background-color: #E2AD27;
    box-shadow: 5px 5px 5px #888888;
}

h2 {
     color: #5F489D;
}

Answer 1

This is the simplest, less amount of lines, and easiest solution to your problem:

.buttonlink:hover, .buttonlink:active {
    background: #E2AD27;
}

Answer 2

Your CSS has no rules to override the previously-set background-image styles. Please consider the following:

.buttonlink:hover, .buttonlink:active {
    background-image: -moz-none;
    background-image: -webkit-none;
    background-image: -webkit-none;
    background-image: -o-none;
    background-image:none;
    background-color: #E2AD27;
    box-shadow: 5px 5px 5px #888888;
}

Here's a demo to show you a live example:

http://codepen.io/anon/pen/kXZwdX