html - Transition on gradient button?

Question

I'm trying to set a transition for this button I have on this mockup navbar I'm making and when I hover over, I want a 0.5s transition for a background change, but it isn't working I haven't really used transitions much in css, but this is what the great google has told me :

.btn-primary {
    border: 1px solid #e5e5e5;
    border-radius: 6px;
    padding: 6px;
    background: -webkit-linear-gradient(bottom, #0066FF 0, #0088FF 85%, #00AAFF 100% );
    font-size: 14px;
    color: white;
}

.btn-primary:hover {
    background: -webkit-linear-gradient(bottom, #0000CC 0, #0044CC 100%);
    cursor: pointer;
    -webkit-transition: background 0.3s linear;
}

Demo: http://codepen.io/anon/pen/lApnj

Any information would be great thanks! :)