CSS Transitions on Touch Devices Doesn't Revert to Normal State - css

Question

I've got some buttons that have a CSS transition from black to yellow on hover, then return back to black. When clicked they make an AJAX call. They work nicely when I hover over them and click a mouse on all desktop browsers (naturally IE9 and lower ignore it), but on both iOS Safari, and the standard Android browser, the transition stays yellow after I have clicked the button. They do not return to the normal black state, like they do on a desktop system.
Any clues as to where I've gone wrong would be greatly appreciated. For those with a touch device, this Fiddle demonstrates the problem - http://jsfiddle.net/wpyz9whn/1/
CSS
a.button {
background-color: #000000;
color: #FFFFFF;
border: none;
text-decoration: none;
padding: 0px 10px;
display: block;
line-height: 24px;
font-weight: 700;
text-align: center;
transition: background 0.8s ease-out;
-moz-transition: background 0.8s ease-out;
-webkit-transition: background 0.8s ease-out;
text-transform: uppercase;
-webkit-appearance: none;
}
a.button:hover {
background: #ffcc00;
color: #000;
transition: background 0.2s ease-in;
-moz-transition: background 0.2s ease-in;
-webkit-transition: background 0.2s ease-in;
}
a.button:active {
background: #ff9c00;
transition: background 0s ease-in;
-moz-transition: background 0s ease-in;
-webkit-transition: background 0s ease-in;
}
a.button:focus {
outline: none;
}
HTML
<a class="button" onclick="return addToBasket(11628937,'/')">Add to Basket</a>